>[success] # 項目環境劃分 ~~~ 1.在項目不同階段，往往需要對其進行不同的webpack配置，例如線上環境就不會需要有'HMR' 熱更新的操作，因此可以理解生成環境和開發環境有很大的差異，'生產環境注重運行效率', '開發環境注重開發效率'往往我們需要對不同的環境進行不同環境的配置區分 2.Webpack4 推出 模式(mode) 的用法,也會為我們默認添加了不同插件 ~~~ >[danger] ##### 第一種方案利用函數 ~~~ 1.在'webpack.config.js' 如果導出的是一個函數，啟動時候 npm webpack // 未傳遞任何參數 默認以開發模式打包 npm webpack --env production // 以生產模式打包 2.當然可以直接使用第三方工具'https://www.npmjs.com/package/cross-env' ~~~ [參考鏈接](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 } ~~~ >[danger] ##### 根據配置文件劃分 ~~~ 1.不同環境對應不同配置文件（大型項目） 2.這種方式的思路就是利用編程的思想，將共同的部分作為基類也就是'webpack.common.js', 在根據不同的環境來對此基類進行對應的引用配置 3.注意這里的對象合并使用的是 'webpack-merge' ~~~ [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 ~~~