Webpack：Tree Shaking（9）

介绍

Three Shaking只支持import的静态引入模块的模式，require是commonJS动态引入不支持。在production打包模式下自动被使用。

webpack.config.js

const path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const webpack = require('webpack'); module.exports = { mode: 'development', devtool: 'cheap-module-eval-source-map', entry: { main: './src/index.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }, devServer: { contentBase: './dist' }, plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' }), new CleanWebpackPlugin() ], optimization: { //development打包的模式才需要这个 usedExports: true }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') } };

pageck.json

配置文件的sideEffects字段，使css等配置文件不要被tree shaking掉。tree shaking会检查文件是否有导出，像css文件这种没有导出的都会被tree shaking掉。

{ "name": "webpack-demo", "sideEffects": [ "*.css" ], "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": { "@babel/polyfill": "^7.11.5", "@babel/runtime-corejs2": "^7.11.2", "url-loader": "^4.1.0", "webpack": "^4.44.2", "webpack-cli": "^3.3.12" }, "devDependencies": { "@babel/core": "^7.11.6", "@babel/plugin-transform-runtime": "^7.11.5", "@babel/preset-env": "^7.11.5", "autoprefixer": "^9.8.6", "babel-loader": "^8.1.0", "clean-webpack-plugin": "^3.0.0", "css-loader": "^4.3.0", "file-loader": "^6.1.0", "html-webpack-plugin": "^4.5.0", "node-sass": "^4.14.1", "postcss-loader": "^4.0.2", "sass-loader": "^10.0.2", "style-loader": "^1.2.1", "webpack-dev-server": "^3.11.0" }, "scripts": { "watch": "webpack --watch", "start": "webpack-dev-server --open", "boundle": "webpack" }, "keywords": [], "author": "", "license": "ISC", "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }