webpack V4.43.0 官方指南 踩坑

tree-shaking

由于之前学习了 开发部分的 使用source map 所以配置对象 devtool: ‘inline-source-map’ 导致 tree-shaking 失效

package.json

{
  "name": "your-project",
  "sideEffects": false
}

webpack.config.js

  module.exports = {
     mode: "production",
     devtool: process.env.NODE_ENV=='development'? 'inline-source-map':false
  }

tree shaking 结论补充总结

1.使用 ES2015 模块语法（即 import 和 export）

2.在项目 package.json 文件中，添加一个 “sideEffects” 入口。且值为： false

3.引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 UglifyJSPlugin）

4.其他选项或插件可能会造成失效:

• 例如 devtool: ‘inline-source-map’

清理 /dist 文件夹

官方demo 会报错 TypeError: CleanWebpackPlugin is not a constructor

  const CleanWebpackPlugin = require('clean-webpack-plugin');
  module.exports = {
    plugins: [
      new CleanWebpackPlugin(['dist'])
    ]
  };

去看一下 clean-webpack-plugin.d （webstorm用户鼠标移动到 require(‘clean-webpack-plugin’) 快捷键 ctrl + b 跳转）

......
declare class CleanWebpackPlugin {//...}
export { CleanWebpackPlugin };

所以是引入的问题 ，修改正确 的引入方式

  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  module.exports = {
    plugins: [
      new CleanWebpackPlugin()
    ]
  };