手记

webpack V4.43.0 官方指南 踩坑

由于之前学习了 开发部分的 使用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’

官方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()
    ]
  };
1人推荐
随时随地看视频
慕课网APP