一、前言
上一篇讲到 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，共同成长，卷卷群里等你 🤪。
以上，感谢您的阅读～
