Webpack5 系列(六):不同模式的区分打包
一、前言
上一篇讲到 Tree Shaking 相关的内容,本篇将介绍在不同模式(或称环境)下的打包处理。
二、不同环境下的打包配置
1. 开发环境的配置
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
// 模式
mode: 'development',
// 性能优化 (tree shaking)
optimization: {
usedExports: true
},
// source-map
devtool: 'eval-cheap-module-source-map',
// 入口文件
entry: './src/index.js',
// 开发服务器
devServer: {
static: path.resolve(__dirname, 'dist'),
compress: true,
port: 8080,
open: true,
hot: 'only'
},
// 输出文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
assetModuleFilename: 'assets/[name]_[hash][ext]',
clean: true,
},
// 模块
module: {
rules: [
{
test: /\.js$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
sideEffects: true
}
// ...
]
},
// 插件
plugins: [
new HTMLWebpackPlugin({
template: './src/index.html'
}),
new webpack.HotModuleReplacementPlugin()
]
};
2. 生产环境的配置
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 模式
mode: 'production',
// source-map
devtool: 'nosources-source-map',
// 入口文件
entry: './src/index.js',
// 输出文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
assetModuleFilename: 'assets/[name]_[hash][ext]',
clean: true,
},
// 模块
module: {
rules: [
{
test: /\.js$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
sideEffects: true
}
// ...
]
},
// 插件
plugins: [
new HTMLWebpackPlugin({
template: './src/index.html'
})
]
};
通过观察,我们会发现不同模式下的配置实际上存在了大量的重复代码,那么对于这些重复的代码就需要将它们分离出来共用,提高代码效率。
三、webpack-merge
这个插件就可以将不同配置合并在一起,也就是可以将共用的配置和不同模式下的配置进行合并,这样就节约了大量的代码书写。
插件安装:
npm i —save-dev webpack-merge
1. 共用配置
新建一个文件 webpack.common.config.js(文件名可以自己起),用于编写共用配置。
// webpack.common.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口文件
entry: './src/index.js',
// 输出文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
assetModuleFilename: 'assets/[name]_[hash][ext]',
clean: true,
},
// 模块
module: {
rules: [
{
test: /\.js$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
sideEffects: true
}
]
},
// 插件
plugins: [
new HTMLWebpackPlugin({
template: './src/index.html'
})
]
};
2. 开发环境的配置
新建文件:webpack.dev.config.js
// webpack.dev.config.js
const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge'); // 插件引入
const commonConfig = require('./webpack.common.config'); // 引入共用配置
const devConfig = {
// 模式
mode: 'development',
// 性能优化 (tree shaking)
optimization: {
usedExports: true
},
// source-map
devtool: 'eval-cheap-module-source-map',
// 开发服务器
devServer: {
static: path.resolve(__dirname, 'dist'),
compress: true,
port: 8080,
open: true,
hot: true // 代码变化后,自动刷新页面 (该参数可以不用手动添加,它已经被自动应用于 HMR 插件。)
},
// 插件
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
module.exports = merge(commonConfig, devConfig); // 共用配置与开发配置合并
3. 生产环境的配置
新建文件:webpack.prod.config.js
const { merge } = require('webpack-merge'); // 插件引入
const commonConfig = require('./webpack.common.config'); // 引入共用配置
const prodConfig = {
mode: 'production',
devtool: 'nosources-source-map'
};
module.exports = merge(commonConfig, prodConfig); // 共用配置与生产配置合并
四、package.json 的设置
在完成配置以后,我们还需要写一些脚本,方便运行打包。
// package.json
"scripts": {
"dev": "webpack serve --config ./build/webpack.dev.config.js",
"build": "webpack --config ./build/webpack.prod.config.js"
}
注意:
- 一般我们会把两个配置文件放在一个叫做 build 的文件夹中。
- 配置 dev 和 build 命令时,要看清楚 dev 是需要启动本地服务器的,所以要在 webpack 后面添加 serve;而 build 是生产环境打包,不需要开本地服务器,直接写 webpack 进行打包就行。
- 记得添加
--config
来自己指定配置文件,同时也要注意文件的路径。
小结
- 安装 webpack-merge
- 在 webpack.common.config.js 中编写共用配置
- 在 webpack.dev.config.js 中编写开发配置,并利用插件与共用配置合并
- 在 webpack.prod.config.js 中编写生产配置,并利用插件与共用配置合并
- 配置完成后,编写 npm 脚本指令
- 更简洁的配置方式可以参考: www.npmjs.com/package/web…
- 也可以看我的仓库:github.com/Knight174/w…
添加我的微信:enjoy_Mr_cat,共同成长,卷卷群里等你 🤪。
以上,感谢您的阅读~