webpack打包工具注意事项

webpack
  1. Webpack 的四个核心概念是什么？
  2. 如何配置多个入口（entry）？
  3. 如何配置环境变量？
  4. 什么是 Tree Shaking？如何启用？
  5. 如何优化打包体积？
  6. 如何配置 Webpack 构建多页应用（MPA）？

Webpack 的四个核心概念是什么？

列举并简述 Webpack 的四大核心配置项。
概念 描述
entry 入口文件，指定 Webpack 开始构建的位置
output 输出路径与文件名配置
loader 处理非 JS 文件（如 CSS、图片、TypeScript）
plugin 扩展 Webpack 功能（如压缩、优化、注入变量）

如何配置多个入口（entry）？

配置 Webpack 同时打包两个独立页面（如 index 和 about 页面）。

如何配置环境变量？

在不同环境中注入不同的 API 地址。
使用 DefinePlugin 定义全局变量。

什么是 Tree Shaking？如何启用？

只打包实际使用的代码，减少体积。
Tree Shaking 是通过 ES Module 静态分析删除未使用代码的技术。

1
2
3
4
5
6
7
8
9
10
11
12
 // webpack.config.js
module.exports = {
  optimization: {
    usedExports: true,
    minimize: true
  }
};

// package.json
{
  "sideEffects": false
}

如何优化打包体积？

减少最终打包文件大小的方法有哪些？

使用 TerserPlugin 压缩 JS。
使用 MiniCssExtractPlugin 提取 CSS。
使用 SplitChunksPlugin 分包。
移除无用代码（Tree Shaking）。
使用 externals 排除第三方库（如 React）。

1
2
3
4
5
6
7
8
// webpack.config.js
optimization: {
  minimize: true,
  minimizer: [new TerserPlugin()],
  splitChunks: {
    chunks: 'all'
  }
}

如何配置 Webpack 构建多页应用（MPA）？

同时打包多个 HTML 页面，每个页面对应一个入口文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({ filename: 'home.html', template: './src/home.html', chunks: ['home'] }),
    new HtmlWebpackPlugin({ filename: 'about.html', template: './src/about.html', chunks: ['about'] })
  ]
};

当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器