【webpack5】一些常用配置及原理介绍（一）

新生代农民工官方认证码农小拽

已于 2023-02-18 20:04:39 修改

阅读量428

点赞数

分类专栏： webpack 文章标签： webpack javascript 前端

于 2023-02-16 22:55:53 首次发布

本文链接：https://blog.csdn.net/tuzi007a/article/details/129033342

版权

webpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

安装和基础应用

准备

首先检查node版本是否>=10.13.0，如果低于该版本，要先更新node版本。

最好选用不低于14 的版本。

如果npm还没配置淘宝镜像，或者当前使用的是旧的淘宝镜像，

可以重新配置下新的淘宝镜像：

npm config set registry https://registry.npmmirror.com/

然后检查下是否配置成功：

npm config get registry
// 如果输出的是新的淘宝镜像，说明配置成功

项目下如果还没有package.json文件，要先执行

npm init -y

生成package.json文件。

安装

npm i webpack webpack-cli -D

CLI指令

# 命令行接口文档
https://www.webpackjs.com/api/cli/

// 直接打包 默认模式为production
npx webpack
// 如果存在webpack.config.js配置文件，就会使用该文件进行打包

// 查看npx webpack指令的其他参数
npx webpack -h 或 npx webpack --help 或 npx webpack help

// 查看webpack相关版本信息
// 该指令会得到设备系统版本、node、yarn、npm、
// 设备当前浏览器、webpack、webpack-cli的版本信息
npx webpack --version 或 npx webpack -v
或 npx webpack version 或 npx webpack v

// 直接打包某个文件
npx webpack 文件相对路径
// 例如 npx webpack ./src/index.js

// 用哪个配置文件打包
npx webpack --config 配置文件的相对路径
或 npx webpack -c 配置文件的相对路径

// 设置打包环境
npx webpack --mode development 
或 npx webpack --mode=development

// 显示webpack编译进度
npx webpack --progress

// 给webpack.config.js文件传入NODE_ENV环境变量
npx webpack --node-env development
// 在使用webpack.config.js编译时，就可以通过process.env.NODE_ENV
// 获取到传入的值

// 运行webpack开发服务器
npx webpack serve

五个概念和基础项

模式：mode，主要有development和production两个值
入口：entry，可以有一个或多个，使用相对路径
出口：output，可以有一个或多个，默认是./dist/main.js，
开发模式下可以没有出口，路径需要使用绝对路径
加载器：loader，用module对象表示，把loader写在rules数组里。
webpack只能处理js json等文件，其他文件如less/sass等就需要借助loader来解析。
插件：plugin，是构造函数的形式，引入后同构new使用

webpack就是围绕这五个概念来配置的。

基础配置：

const path = require('path');

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'main.js'
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/
			}
		]
	},
	plugins: [
		new XXXPlugin(options)
	]
}

常用的Loader

处理样式

文档：

https://www.webpackjs.com/loaders/#styling

webpack本身并不能处理css样式，需要借助其他loader来实现。

比如，在index.js同目录下创建文件index.css，并通过import引入。

此时，使用webpack打包，会出现报错，因为它不能识别。

style-loader：将css代码插入到html文件的head标签下的style标签中
css-loader：加载css文件并解析import引入的css文件，生成css代码
less-loader：加载并编译less文件，生成css文件
sass-loader：加载并编译sass/scss文件，生成css文件

安装：

npm i style-loader css-loader -D

npm i less less-loader -D

npm i sass sass-loader -D

配置：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    },
    {
      test: /\.s[ac]ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}

处理图片、字体、音视频等

文档：

https://www.webpackjs.com/guides/asset-modules/

有四种模块类型：

asset/resource：打包资源，生成url，不改变文件大小
asset/inline：打包资源，生成base64格式的字符串。
优点是资源直接变成字符串，不需要通过网络请求，就可以直接加载出资源
缺点是体积会略微变大。所以一般对体积小的资源使用该类型
asset/source ：生成源代码
asset：如果被打包的资源体积超过某个值，就自动转为asset/resource类型
如果资源体积小于某个值，就自动转为asset/inline类型，
设置该值的方法参考文档。

打包图片配置：

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
          	// 小于10kb的图片将被转为base64资源，而不是被打包进dist
            maxSize: 10 * 1024 // 10kb
          }
        },
        generator: {
        	// 打包生成的图片
        	// 打包后放在dist/static目录下
        	// 文件名由hash值+文件拓展名+参数组成
        	// 其中，[hash:10]表示取hash值的前面10位
			filename: 'static/[hash][ext][query]'
		}
      }
    ]
  }
}

打包字体、音视频配置：

{
  test: /\.(ttf|woff2?|mp3|mp4|avi|ogg)$/,
  type: 'asset/resource'
}

这里有个问题，就是生成文件名字，打包图片、字体、音视频等，

都要在generator种配置filename，这有点麻烦，所以可以这样做：

// webpack.config.js

module.exports = {
  // ...
  output: {
	// ...
	// 这里给图片 字体 音视频等打包文件统一命名
	// 就不需要每次在generator写filename了
	assetModuleFilename: 'static/[hash][ext][query]'
  }
}

处理css兼容

这里需要用到postcss postcss-loader postcss-preset-env，

同时，需要在package.json中加入browserslist配置项，

告诉加载器需要适配到什么样的浏览器。

它的配置需要放在css-loader的下面（或后面），其他样式的loader

（如less-loader sass-loader的上面（或前面））。

postcss-preset-env插件中已经包含了autoprefix插件，所以，就不需要

再另外配置autoprefix了。

文档：

https://www.webpackjs.com/loaders/postcss-loader/

安装：

npm i postcss postcss-loader postcss-preset-env -D

配置：

// webpack.config.js

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                'postcss-preset-env'
              ]
            }
          }
        }
      ]
    },
    {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                'postcss-preset-env'
              ]
            }
          }
        },
        'less-loader'
      ]
    },
    {
      test: /\.s[ac]ss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                'postcss-preset-env'
              ]
            }
          }
        },
        'sass-loader'
      ]
    }
  ]
}

觉得这块代码太长了，也可以做一次封装：

function getStyleLoader(preLoader) {
  return [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            'postcss-preset-env'
          ]
        }
      }
    },
    preLoader
  ].filter(Boolean); // filter(Boolean)用来过滤掉空值
};

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: getStyleLoader()
      },
      {
        test: /\.less$/,
        use: getStyleLoader('less-loader')
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoader('sass-loader')
      }
    ]
  }  
}

在package.json中配置browserslist：

// package.json
// 比如适配ie8以上的版本

{
  // ...
  "browserslist": [
    "ie >= 8"
  ]
}

再打包一些低版本无法识别的样式，就会加上-ms-前缀了。

但是我们一般不兼容到这么低的版本（ie死了，芜湖起飞~~），

所以一般都简单配置如下：

"browserslist": [
  "last 2 version", // 只兼容市面上浏览器最近的两个版本
  ">= 1%", // 覆盖市面上99%的浏览器
  "not dead" // 还存活的浏览器，IE死了
]

处理js/ts/jsx/tsx

使用babel-loader，在babel内容中有展示。

常用Plugin

处理html

使用html-webpack-plugin，文档：

https://www.webpackjs.com/plugins/html-webpack-plugin

该插件在打包时，可以在dist目录下自动生成一份html文件，

也可以按照某个模板生成一份html文件，同时自动引入所需的js和css。

安装：

npm i html-webpack-plugin -D

配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 自动生成一份html文件，并自动引入js和css
module.exports = {
	// ...
	plugins: [
		new HtmlWebpackPlugin()
	]
}

// 以public/index.html文件为模板，生成html文件，并自动引入js和css代码
module.exports = {
	// ...
	plugins: [
		new HtmlWebpackPlugin(
			template: path.resolve(__dirname, 'public/index.html')
		)
	]
}

自动引入js时，会生成script标签，加上defer属性，放在head标签中。
自动引入css时，会生成link标签，放在head标签中。

处理css

mini-css-extract-plugin

在使用import引入css样式时，css会被打包到js代码中，

使用该插件可以将这部分css代码提取到单独的css文件中。

该插件在生成模式中使用，使用时，需要将style-loader替换成MiniCssExtractPlugin.loader。

该插件也解决了闪屏问题。

文档：

https://www.webpackjs.com/plugins/mini-css-extract-plugin/

安装：

npm i mini-css-extract-plugin -D

配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	// ...
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [MiniCssExtractPlugin.loader, 'css-loader']
			}
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			// 生成index.css文件，并放在dist/css目录下
			filename: 'css/index.css'
		})
	]
}

压缩css代码

生产模式下，html和js代码默认会被压缩，而css代码不会。

这就需要使用css-minimizer-webpack-plugin插件单独处理。

用于压缩css代码。一般只于生产模式。

有两种配置方式，一种是写在optimization中，另一种是直接写在plugins中。

如果想在开发模式下也开启压缩，需要另外配置minimize: true。

文档：

https://www.webpackjs.com/plugins/css-minimizer-webpack-plugin/

安装：

npm i css-minimizer-webpack-plugin -D

配置：（两种方式）

// 引入
const CssMinimizerPlugin = require('css-minimizer-webpack-pllugin');

modules.exports = {
  // ...
  optimization: {
	minimizer: [
	  new CssMinimizerPlugin()
	],
	// 开发模式下也想开启压缩，就在这里配置，不过配置意义不大
	// minimize: true
  }
}

或者：

// 引入
const CssMinimizerPlugin = require('css-minimizer-webpack-pllugin');

modules.exports = {
  // ...
  plugins: [
	new CssMinimizerPlugin()
  ]
}

其他功能

自动清空上次打包的文件

文档：

https://www.webpackjs.com/configuration/output/#outputclean

基础配置：

module.exports = {
	output: {
		// ...
		clean: true // 清空上次打包的文件
	}
}

配置开发服务器

介绍

文档：

https://www.webpackjs.com/configuration/dev-server/

通过配置devServer配置项，来快速搭建一个本地服务器，

并通过修改package.json中的scripts配置项，达到本地快速启动的目的。

要求node >= 12.13.0

要求mode是development

它实现了HMR热替换功能。

启动开发服务器时，是在内存中打包文件的，所以并不会在dist目录下生成打包文件。

所以，此时就不需要配置clean: true了，因为根本不会生成文件，也就不需要清空打包文件了。

配置

安装：

npm i webpack-dev-server -D

配置：

modules.exports = {
	// ...
	devServer: {
		host: 'localhost', // 域名，默认localhost
		port: 3001, // 端口号
		open: true, // 启动服务时，是否自动打开浏览器
	}
}

此时，执行命令npx webpack serve即可启动本地服务器。

另外，可以在package.json的scripts配置项中配置其他启动指令，如

{
	scripts: {
		// ...
		"start": "webpack serve"
	}
}

然后使用命令npm start启动服务器。

此时修改文件中的代码，可以看到页面会自动显示最新的效果。

另外，如果需要指定使用哪个配置文件，需要加上：

{
	scripts: {
		// ...
		"start": "webpack serve -c ./webpack.dev.js"
		// 或者
		// "start": "webpack serve --config ./webpack.dev.js"
	}
}

Eslint

介绍

它是一个通过配置实现js和jsx的检测工具。

文档：

http://eslint.cn/docs/user-guide/getting-started

配置中的属性：

文档：

http://eslint.cn/docs/user-guide/configuring

解析器选项parserOptions

它有如下配置属性：

ecmaVersion 用来指定要使用的ES版本，比如6，7，8，9，10等
sourceType 指定资源类型，默认为script，也可以设置为module
ecmaFeature 可以指定使用额外的语言特性，它有如下属性，设置为true时表示开启
- globalReturn 允许在全局作用域下使用 return 语句
- impliedStrict 启用全局的严格模式
- jsx 启用jsx

规则rules

"off" 或 0 表示关闭规则
"warn" 或 1 表示出现问题时给出警告，但是代码可以正常运行
"error" 或 2 表示出现问题时直接报错，代码停止运行

文档：

http://eslint.cn/docs/rules/

规则配置示例：

rules: {
	semi: 2, // 强制使用分号，如果不使用，就会报错
	'default-case': 1, // switch语句需要带上default分支，如果不写，就会给出警告
	eqeqeq: [
		1, // 不写全等符号就会警告
		'smart' // 智能识别，少数情况下不会警告
	]
}

继承extends

继承谁就表示使用谁的规则，如

官方规则：eslint:recommended
React规则：react-app
Vue规则：plugin:vue/essential

官方规则不需要安装，可以直接继承，其他规则需要安装后再使用。

继承单个规则，值就用字符串，继承多个规则，值就用数组。

extends: "eslint:recommended"

extends: [
    "eslint:recommended",
    "plugin:react/recommended"
]

使用

安装：

npm i eslint eslint-webpack-plugin -S-D

webpack插件使用介绍：

https://www.webpackjs.com/plugins/eslint-webpack-plugin

在webpack.config.js配置文件中引入并使用插件：

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

module.exports = {
	plugins: [
		new EslintPlugin(
			context: path.resolve(__dirname, 'src'), // 指定对src目录下的内容进行检查
		)
	]
}

运行webpack进行编译，会启动eslint检查。此时还缺少eslint配置文件，下面进行配置。

在根目录下创建.eslintrc.js文件，然后配置：

modules.exports = {
	extends: "eslint:recommended",
	env: {
		node: true, // 启用全局node变量和node.js作用域
		browser: true // 启用浏览器中的全局变量
	},
	parserOptions: {
		ecmaVersion: 6,
		sourceType: "module"
	},
	rules: {
		eqeqeq: [2, "smart"]
	}
}

阻止

如果有些文件不想让eslint检查，还可以在根目录配置文件.eslintignore来阻止检查，

比如

node_modules
dist
lib
build

Babel

介绍

文档：

https://www.babeljs.cn/docs/

它是一个js兼容工具，可以将es6及以上的语法，编译成es5，让更多浏览器识别。

通过在根目录配置文件babel.config.js或.babelrc.js来起作用。

babel的核心是@babel/core，使用babel时，必须安装这个库。

另外，babel通过预设(presets)来扩展功能。如：

@babel/preset-env 允许使用最新的js
@babel/preset-react 用来编译react中的jsx语法
@babel/preset-typescript 用来编译ts语法

babel有自己内置的命令行工具@babel-cli，文档：

https://www.babeljs.cn/docs/babel-cli

使用

安装：

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

在webpack配置文件中配置：

module.exports = {
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/, // 不处理node_modules中的内容
				loader: "babel-loader",
				options: {
					// 这部分内容可以单独配置在.babelrc.js中
					presets: ["@babel/preset-env"] 
				}
			}
		]
	}
}

或者上面的options参数不写，单独在根目录下创建.babelrc.js配置文件：

module.exports = {
	presets: ["@babel/preset-env"]
}