tree-shaking

Devtool: ‘inline-source-map’ causes tree-shaking to be invalid because we learned how to use source map in development

package.json

{
  "name": "your-project"."sideEffects": false
}
Copy the code

webpack.config.js

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

Tree shaking

1. Use ES2015 module syntax (i.e. Import and export)

2. In the project package.json file, add a “sideEffects” entry. And the value is false

3. Introduce a minifier that removes unreferenced dead code (e.g. UglifyJSPlugin)

4. Other options or plug-ins may fail:

  • For example devtool: ‘the inline – source – map’

Clean up the /dist folder

TypeError: CleanWebpackPlugin is not a constructor

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

Take a look at clean-webpack-plugin.d (webstorm user mouse move to require(‘clean-webpack-plugin’) shortcut key CTRL + B jump)

. declareclass CleanWebpackPlugin {/ /... }
export { CleanWebpackPlugin };
Copy the code

So it’s a matter of importing, modifying the correct importing

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