>[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 文件夹下