webpack5 的使用

迷之珊瑚

475人浏览 · 2025-09-16 19:57:48

迷之珊瑚 · 2025-09-16 19:57:48 发布

webpack 基本配置和打包

包名不能叫webpack

npm i webpack webpack-cli -D

npx 可以运行环境变量

打包：

npx webpack ./src/main.js --mode=development

编译成功

不报错了。。

打包生产环境->压缩：

npx webpack ./src/main.js --mode=production

目录结构：

代码：

count.js

export default function count(x, y){
	return x - y;
}

sum.js

export default function sum(...args) {
	return args.reduce((p, c) => p + c, 0)
}

main.js

import count from "./js/count"
import sum from "./js/sum"

console.log(count(2,1));
console.log(sum(1,2,3,4));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>hello webpack</h1>
	<script src="../dist/main.js"></script>
</body>
</html>

处理样式资源

首先要在入口文件引入

main.js:

import "./css/index.css"

.box1 {
  width: 100px;
  height: 100px;
  background: pink;
}

在官网中找到loader的配置：

https://webpack.docschina.org/loaders/css-loader/

在webpack 配置中添加loader

{

test: /\.css$/i, // 检测xxx,css文件（检测.css 文件）

use: [ // 执行顺序：从右到左（从下到上）

'style-loader', // 将js中css 通过创建style标签

'css-loader' // 将css 编译成commonJs 模块到js

const path = require("path");
module.exports = {
  // 入口
  entry: "./src/main.js",
  // 输出
  output: {
    // __dirname : 当前文件的文件夹目录
    path: path.resolve(__dirname, "dist")
  },
  // 加载器
  module: {
    rules:[
      {
        test: /\.css$/i, // 检测xxx,css文件（检测.css 文件）
        use: [ // 执行顺序：从右到左（从下到上）
          'style-loader', // 将js中css 通过创建style标签
          'css-loader' // 将css 编译成commonJs 模块到js
        ],
      },
    ]
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development"
}

打包命令：

npx webpack

npm install --save-dev css-loader

style-loader 没有下载，下载一下：

npm i style-loader -D

打包：

npx webpack:

css 文件打包到了js :

打开index.html，添加：

打开index.html，看到css 样式已生效~

动态创建了style 标签

09-基础-处理less资源

less 是css 预处理器

处理less 文件报错

官方文档，安装、配置：

npm install less less-loader --save-dev

文档配置有点小问题，修改一下：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
				// loader:'xxx', 只能使用一个loader,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader', // 将css 编译成css 文件
        ],
      },
    ],
  },
};

10-基础-处理sass资源

安装和配置：

npm install sass-loader sass -D

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ],
  },
};

sass 和scss 写法的差别：

11-基础-处理stylus资源

安装、配置：

npm install stylus-loader -D

.box5 
	width 100px
	height 100px
	background-color yellowgreen

{
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader', // 将stylus 编译成css 文件
        ],
      },

在mian.js中引入：

import "./stylus/index.styl"

12-基础-处理图片资源

webpack4 ：通过file-loader 和url-loader 处理

webpack5: 已经将2个loader 内置

图片转base64 ：

优势：可以减少请求数量：

缺点：比原图大

所以，小图片，转成base64

配置：

{
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: 'asset',
       parser: {
         dataUrlCondition: {
          // 小于10kb的图片转base64
          // 优点：减少请求数量，缺点：体积会更大
           maxSize: 10 * 1024 // 4kb
         }
       }
      }

手动删除dist

打包，

2.jpeg 生成了base64

其它的都是额外发请求得到图片

.box2 {

width: 100px;

height: 100px;

background: url('../images/2.jpeg');

background-size: cover;

}

.box1 {

width: 100px;

height: 100px;

background: url('../images/1.png');

background-size: cover;

index.styl:

.box5 {
   width 100px
   height 100px
   background-color yellowgreen
   background url('../images/3.gif')
   background-size cover

}

module.exports = {

presets: []

}

npm install -D babel-loader @babel/core @babel/preset-env

https://webpack.docschina.org/loaders/babel-loader#root

13-基础-修改输出文件目录

修改入口文件、图片打包输出位置：

限制hash 值生成10位：

generator: {
          // 输出图片名字
         filename: 'static/images/[hash:10][ext][query]'
        }

14-基础-自动清空上次打包内容

clean:true, // 将path 目录清空

15-基础-处理字体图标资源

在阿里巴巴矢量图标库，下载资源

这里使用font class 方式

修改下字体图标的位置：

 {
        test: /\.(ttf|woff2?)$/,
        type: 'asset/resource', // 不会转base64
        generator: {
          // 输出路径+名称
         filename: 'static/media/[hash:10][ext][query]'
        }
      }

打包：

npx webpack

使用：

处理其它资源

加在后面就好了：

17-基础-处理js资源介绍

格式:eslint

兼容性：babel

兼容ie6等

18eslint介绍和使用？（没检查格式）

eslint:可组装的js、jsx 检查工具。

规则合解释：

off/0 ：关闭

warning/1: 警告

error/2 : 错误

eslint: 官方规则文档

打勾的规则：官方推荐的规则

除了官方规则，都需要下载

rules自己写的规则优先级更高，会覆盖继承的规则

webpack 官方eslint 配置

建议安装eslint 插件，提前获知错误

忽略打包后的文件

const ESLintPlugin = require('eslint-webpack-plugin');

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {

plugins: [new ESLintPlugin({
    context: path.resolve(__dirname, "src")
  })],

}

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6, // es6
    sourceType: "module",
  },
  rules: {
    "no-var": "error", // 不能使用 var 定义变量
  },
};

css 压缩

webpack 文档搜索 CssMinimizerWebpackPlugin

npm install css-minimizer-webpack-plugin --save-dev

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

在plugins 中引入

new CssMinimizerPlugin(),

npm run build

css 文件被打包了

html和js压缩

只要是生产模式，html和js 默认压缩，不需要额外配置

高级

高级-SourceMap

*区别在于：是否关注列映射

devtool:"cheap-module-source-map" // 开发模式

devtool:"source-map" // 生产模式

改了配置，要重启服务才生效

提示sum.js ，第二行出错

生产模式下，会告诉你哪一行、哪一列报错了
开发模式只告诉哪一行

生产配置得更精确

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

电子行业工业4.0智能工程方案，生产效率翻倍的秘密！

2048 AI社区

MRR（Mean Reciprocal Rank）和 NDCG（Normalized Discounted Cumulative Gain）

（MRR（Mean Reciprocal Rank）平均倒数排名：第一个正确答案排在第几位，比如搜索python教程，第一个是python官网广告，第二个是某培训机构广告，第三个是python官方文档，第四个是某博客教程。排在第 2 位：打折，得分 = Gain / log₂(2+1) = Gain / 1.58。排在第 1 位：不打折，得分 = Gain / log₂(1+1) = Gain /