1. webpack不同環(huán)境下的配置

1. 配置文件根據(jù)環(huán)境不同導出不同配置

   // webpack.config.json
   const webpack = require('webpack')
   const { CleanWebpackPlugin } = require('clean-webpack-plugin')
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const CopyWebpackPlugin = require('copy-webpack-plugin')
   
   module.exports = (env, argv) => {
     const config = {
       mode: 'development',
       entry: './src/main.js',
       output: {
         filename: 'js/bundle.js'
       },
       devtool: 'cheap-eval-module-source-map',
       devServer: {
         hot: true,
         contentBase: 'public'
       },
       module: {
         rules: [...]
       },
       plugins: [
         new HtmlWebpackPlugin({
           title: 'Webpack Tutorial',
           template: './src/index.html'
         }),
         new webpack.HotModuleReplacementPlugin()
       ]
     }
   
     if (env === 'production') {
       config.mode = 'production'
       config.devtool = false
       config.plugins = [
         ...config.plugins,
         new CleanWebpackPlugin(),
         new CopyWebpackPlugin(['public'])
       ]
     }
   
     return config
   }
   

   1. 運行
   $ webpack --env production
   

2. 一個環(huán)境對應一個配置文件

   // webpack.common.js
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
     entry: './src/main.js',
     output: {
       filename: 'js/bundle.js'
     },
     module: {
       rules: [...]
     },
     plugins: [
       new HtmlWebpackPlugin({
         title: 'Webpack Tutorial',
         template: './src/index.html'
       })
     ]
   }
   

   $ npm i webpack-merge
   

   // 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')
   
   module.exports = merge(common, {
     mode: 'production',
     plugins: [
       new CleanWebpackPlugin(),
       new CopyWebpackPlugin(['public'])
     ]
   })
   

   1. 運行
   $ webpack --config webpack.prod.js
   
   2. 或者按以下配置好運行
   $ npm run build
   

   // 或者寫到 package.json中
   {
     "name": "merge-config",
     "version": "0.1.0",
     "main": "index.js",
     "author": "",
     "license": "MIT",
     "scripts": {
       "build": "webpack --config webpack.prod.js"
     },
     "devDependencies": {
     }
   }
   

2. Tree Shaking

自動檢測代碼中未引用的代碼，并移除它們，會在生產(chǎn)模式自動啟用

// 在其它模式下 使用 tree-shaking
module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  optimization: {
    // 模塊只導出被使用的成員
    usedExports: true,
    // 壓縮輸出結果
    minimize: true,
    // 盡可能合并所有模塊到一個函數(shù)中
    concatenateModules: true
  }
}

3. Tree Shaking和babel

Tree Shaking前提是ES Module，也就是由webpack打包的代碼必須使用ESM，

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              // 如果 Babel 加載模塊時已經(jīng)轉(zhuǎn)換了 ESM，則會導致 Tree Shaking 失效
              // ['@babel/preset-env', { modules: 'commonjs' }]
              
              // ['@babel/preset-env', { modules: false }]
              // 也可以使用默認配置，也就是 auto，這樣 babel-loader 會自動關閉 ESM 轉(zhuǎn)換
              ['@babel/preset-env', { modules: 'auto' }]
            ]
          }
        }
      }
    ]
  },
  optimization: {
    // 模塊只導出被使用的成員
    usedExports: true,
    // 盡可能合并每一個模塊到一個函數(shù)中
    concatenateModules: true,
    // 壓縮輸出結果
    minimize: true
  }
}

4. sideEffects

定義：模塊執(zhí)行時除了導出成員之外所作的事情，一般用于npm包標記是否有副作用

1. 在webpack.json中開啟該功能

   module.exports = {
     mode: 'none',
     ...
     optimization: {
       // 開發(fā)環(huán)境會自動開啟
       sideEffects: true
     }
   }
   

2. 在package.json中標識當前代碼沒有副作用

   {
     ...
     "sideEffects": false
   }
   

   使用前提：確保代碼真的沒有副作用，否則

   {
     ...
     "sideEffects": [
       "*.css",
       ...
     ]
   }