杨信鹏的博客

# 管理输出

  1. 在index.html中手动引入打包后的产物，效率是十分慢的。我们需要使用html-webpack-template (opens new window)将产物自动引入至index.html中。
  2. 需要自动将清除上一次打包出的产物，需要使用clean-webpack-plugin (opens new window)。

# 自动引入

# webpack5
npm install --save-dev html-webpack-plugin@next
# webpack4
npm install --save-dev html-webpack-plugin
1
2
3
4
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    // ...
    new HtmlWebpackPlugin({
      title: "webpack",
      template: "./index.html",
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 可以用 html-webpack-plugin 中定义的变量赋值 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body></body>
</html>
1
2
3
4
5
6
7
8
9
10

# 清理 dist

# 安装
npm install --save-dev clean-webpack-plugin
1
2
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  plugins: [
    // ...
    new CleanWebpackPlugin(),
  ],
};
1
2
3
4
5
6
7
8

链接

← 模式 →