>[success] # 項目模塊環境劃分 在項目不同階段，往往需要對其進行不同的`webpack`配置，例如線上環境就不會需要有`HMR`，熱更新的操作，因此可以理解生成環境和開發環境有很大的差異，**生產環境注重運行效率，開發環境注重開發效率**，往往我們需要對不同的環境進行不同環境的配置區分 >[info] ## 項目小復雜度不高 如果項目小復雜度不高可以直接采用變量參數作為配置切換，可以使用 **[cross-env](https://www.npmjs.com/package/cross-env)**，即使用時候可以進行傳參 ~~~ npm webpack // 未傳遞任何參數 默認以開發模式打包 npm webpack --env production // 以生產模式打包 ~~~ [webapck 官方參考地址](https://webpack.docschina.org/guides/environment-variables/#root) ~~~ // webpack.config.js ... // 支持導出一個函數 返回所需要的配置對象 module.exports = (env, argv) => { // 1.通過cli傳遞的環境名參數 2.運行cli傳遞到所有參數 const config = { // 開發模式 mode: 'development', ... } if (env === 'production') { // 生產環境 config.mode = 'production' config.devtool = false // 禁用Source Map config.plugins = [ ...config.plugins, // 開發階段可省略而生產環境需要的插件 ... ] } return config } ~~~ >[info] ## 項目大復雜度高 項目大復雜度高，還是進行**環境文件拆分配置**，方便維護和擴展，采用**不同環境對應不同配置文件**，但即使環境在不同也是會存在相同配置項，可以將相同配置進行抽離，**[webpack-merge](https://www.npmjs.com/package/webpack-merge)** 就是一個很好的配置合并方法 * webpack.common.js 中保存公共配置 ~~~ const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/main.js', output: { filename: 'js/bundle.js' }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\\.(png|jpe?g|gif)$/, use: { loader: 'file-loader', options: { outputPath: 'img', name: '[name].[ext]' } } } ] }, plugins: [ new HtmlWebpackPlugin({ title: 'Webpack Tutorial', template: './src/index.html' }) ] } ~~~ * webpack.dev.js 保存開發配置 ~~~ const webpack = require('webpack') const merge = require('webpack-merge') const common = require('./webpack.common') module.exports = merge(common, { mode: 'development', devtool: 'cheap-eval-module-source-map', devServer: { hot: true, contentBase: 'public' }, plugins: [ new webpack.HotModuleReplacementPlugin() ] }) ~~~ * webpack.prod.js 保存生產配置 ~~~ const merge = require('webpack-merge') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const CopyWebpackPlugin = require('copy-webpack-plugin') const common = require('./webpack.common') // Object.assign 完全覆蓋掉前一個對象的同名屬性 // 使用webpack-merge 合并公共配置與該配置 module.exports = merge(common, { mode: 'production', plugins: [ new CleanWebpackPlugin(), new CopyWebpackPlugin(['public']) ] }) ~~~ ~~~ 使用開發模式 npm webpack-dev-server --config webpack.dev.js --open 使用生產模式 npm webpack --config webpack-prod.js ~~~ * 也可將配置都放到一個config 文件夾下