webpack不同环境配置和Tree Shaking，sideE

1. webpack不同环境下的配置

1. 配置文件根据环境不同导出不同配置

   // 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. 一个环境对应一个配置文件

   // 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

自动检测代码中未引用的代码，并移除它们，会在生产模式自动启用

// 在其它模式下 使用 tree-shaking
module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  optimization: {
    // 模块只导出被使用的成员
    usedExports: true,
    // 压缩输出结果
    minimize: true,
    // 尽可能合并所有模块到一个函数中
    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 加载模块时已经转换了 ESM，则会导致 Tree Shaking 失效
              // ['@babel/preset-env', { modules: 'commonjs' }]
              
              // ['@babel/preset-env', { modules: false }]
              // 也可以使用默认配置，也就是 auto，这样 babel-loader 会自动关闭 ESM 转换
              ['@babel/preset-env', { modules: 'auto' }]
            ]
          }
        }
      }
    ]
  },
  optimization: {
    // 模块只导出被使用的成员
    usedExports: true,
    // 尽可能合并每一个模块到一个函数中
    concatenateModules: true,
    // 压缩输出结果
    minimize: true
  }
}

4. sideEffects

定义：模块执行时除了导出成员之外所作的事情，一般用于npm包标记是否有副作用

1. 在webpack.json中开启该功能

   module.exports = {
     mode: 'none',
     ...
     optimization: {
       // 开发环境会自动开启
       sideEffects: true
     }
   }
   

2. 在package.json中标识当前代码没有副作用

   {
     ...
     "sideEffects": false
   }
   

   使用前提：确保代码真的没有副作用，否则

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