Tree Shaking

• 生產(chǎn)環(huán)境去除沒有使用到的內(nèi)容（開發(fā)環(huán)境沒有刪除，會影響調(diào)試）
• 只支持ESM規(guī)范（靜態(tài)引入，編譯時引入），不支持CJS（動態(tài)引入，執(zhí)行時引入）

// webpack.config.js // 和devServer同級 // 開發(fā)環(huán)境會自動加上，可不寫 optimization:{usedExports: true }

• 由于@babel/polyfill并沒有export而是在window上掛載，因此不應(yīng)當(dāng)檢查shaking
• 對于沒有導(dǎo)出內(nèi)容的都應(yīng)該忽略

// package.json "sideEffects": ["@babel/polyfill", "*.css"]

不同的打包模式

• 不同環(huán)境有對應(yīng)的配置文件

• npm install webpack-merge-D 安裝精簡工具

• 通常將webpack配置文件放在build文件夾下

• package.json

{"scripts": {"dev": "webpack-dev-server --config ./build/webpack.dev.js","build": "webpack --config ./build/webpack.prod.js","dev:build": "webpack --config ./build/webpack.dev.js"},"devDependencies": {"@babel/cli": "^7.14.8","@babel/core": "^7.15.0","@babel/preset-env": "^7.15.0","babel-loader": "^8.2.2","clean-webpack-plugin": "^4.0.0-alpha.0","core-js": "^3.8.3","html-webpack-plugin": "~3.2.0","lodash": "^4.17.21","webpack": "~4.41.5","webpack-cli": "~3.3.10","webpack-dev-server": "~3.10.1","webpack-merge": "^5.8.0"} }

• webpack.base.js

const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin")module.exports = {entry: path.resolve(__dirname, "../src/index.js"),output: {path: path.resolve(__dirname , "../dist"),filename: "js/[name].js",},module: {rules: [{test: /\.js$/,use: {loader: 'babel-loader',// options: {// plugins: [['@babel/plugin-transform-runtime', {// absuluteRuntime: false,// corejs: 3,// helpers: true,// regenerator: true,// useESMoudles: false,// version: '7.0.0-beta.0'// }]]// }},exclude: path.resolve(__dirname, 'node_modules')},]},plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: path.resolve(__dirname, "../src/index.html"),excludeChunks: ['node_modules']}),new CleanWebpackPlugin(),], };

• webpack.dev.js

// 設(shè)置熱更新 const webpack = require('webpack')const { merge } = require('webpack-merge') // 公共配置 const baseConfig = require('./webpack.base')// 開發(fā)環(huán)境特有的配置 const devConfig = {mode: 'development',devtool: 'cheap-module-eval-source-map',plugins: [new webpack.HotModuleReplacementPlugin(),],devServer: {open: true,host: "localhost",port: 3333,proxy: {'/api': {target: 'http://study.jsplusplus.com',secure: false, // 如果target是https的pathRewrite: {'^/api': ''},changeOrigin: true}},hot: true,} }; module.exports = merge(baseConfig, devConfig)

• webpack.prod.js

const { merge } = require('webpack-merge') // 公共配置 const baseConfig = require('./webpack.base')// 生產(chǎn)環(huán)境特有的配置 const prodConfig = {mode: 'production',devtool: 'cheap-module-source-map', };module.exports = merge(baseConfig, prodConfig)

總結(jié)

以上是生活随笔為你收集整理的Webpack进阶（一） tree shaking与不同mode的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。