一、Tree Shaking

Tree Shaking只支持ES Module引入方式，不支持CommonJS的引入方式。
在mode为development下，tree shaking不会开；而在mode为production时，tree shaking是自动开着的。

tree shaking的作用是不引入所有代码，只引入需要的代码。

  1. //webpack.config.js中配置
  2. optimization: {
  3.     usedExports: true
  4. }
  6. //package.json
  7. "sideEffects": false
  8. //如果需要配置，例如css文件不需要tree shaking
  9. "sideEffects": ["*.css"]

二、Development和Production模式的区分打包

区别有如下几点：

  • sourcemap：在开发环境下，sourcemap是非常的全的，它能快速帮我们定位出问题代码的位置。
  • 压缩代码：在生产模式下，代码时被压缩过的。

开发和生产模式分离：
创建build文件夹，在下面创建三个文件： webpack.common.js 、 webpack.dev.js 和 webpack.prod.js 分别代表公共的配置、开发环境配置和生产环境配置，目录结构如下所示。
image.png
这里合并两个js文件需要使用webpack-merge，首先用npm安装它，接着在项目中引入

  1. //webpack.prod.js
  2. const merge = require('webpack-merge');
  3. const commonConfig = require('./webpack.common.js');
  5. const prodConfig = {
  6.     mode: 'production',
  7.     devtool: 'cheap-module-source-map'
  8. }
  10. module.exports = merge(commonConfig, prodConfig);
  12. //webpack.dev.js
  13. const merge = require('webpack-merge');
  14. const commonConfig = require('./webpack.common.js');
  16. const devConfig = {
  17.     mode: 'development',
  18.     devtool: 'cheap-module-eval-source-map',
  19.     devServer: {
  20.         contentBase: './dist',
  21.         open: true,
  22.         port: 8080,
  23.         hot: true
  24.     },
  25. }
  27. module.exports = merge(commonConfig, devConfig);

三、Code Splitting（代码分割）

代码分割和webpack无关

webpack中实现代码分割，两种方式
1.同步代码：只需要在webpack.common.js中做optimization的配置；具体配置如下

  1.     optimization: {
  2.         splitChunks: {
  3.       chunks: 'all'
  4.     }
  5.     },

2.异步代码（import）：无需做任何配置，会自动进行代码分割