管理输出 | Colommar Blog

原稿：语雀 · 管理输出 · 原目录：Webpack › 官方指南学习 › 管理输出

本篇的代码使用 webpack doc：管理输出提供的 demo，准备的文件参考上述链接，可删除之前的 loader npm uninstall css-loader style-loader

本节旨在通过插件实现自动管理资源引入，而非手动 import

创建 src/paint.js 并修改 src/index.js 后更新 dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
-    <title>管理资源</title>
+    <title>管理输出</title>
+    <script src="./print.bundle.js"></script>
  </head>
  <body>
-   <script src="bundle.js"></script>
+   <script src="./index.bundle.js"></script>
  </body>
</html>

修改配置，添加 print.js 作为新的入口起点，同时修改 output，动态地产生 bundle 名

const path = require("path");

module.exports = {
  entry: {
    index: "./src/index.js",
    print: "./src/print.js",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

执行 build，此时生成 print.bundle.js 和 index.bundle.js 文件，打开 index.html，可以正常运行

使用 HtmlWebpackPlugin

以上在修改起点名称以及添加新入口后，我们手动修改了 index.html 使之匹配新生成的 bundle，通过 HtmlWebpackPlugin 插件可自动化更新：

安装 npm install –save-dev html-webpack-plugin，修改配置文件，添加插件

const path = require("path");
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {/**/},
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: "管理输出",
+    }),
+  ],
  output: {/**/},
};

执行 build，可以发现 /dist 下自动生成了一个 index.html，而生成的 bundle 已经自动添加在其中

清理 /dist 文件夹

由于遗留了之前的代码，/dist 文件夹很杂乱。webpack 将生成文件并放置在 /dist 文件夹中，但是它不会追踪哪些文件是实际在项目中用到的。通常比较推荐的做法是，在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。通常使用 clean-webpack-plugin 插件：npm install --save-dev clean-webpack-plugin

在配置中引入

const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");+ const { CleanWebpackPlugin } = require("clean-webpack-plugin");module.exports = {  entry: {/**/},  plugins: [+      new CleanWebpackPlugin(),    /**/,  ],  output: {/**/},};

重新 build，则 dist 文件夹中无用文件被清理

manifest

manifest，名词意为货物清单

webpack 和 webpack 插件似乎“知道”应该生成哪些文件：webpack 通过 manifest，可以追踪所有模块到输出 bundle 之间的映射

使用 HtmlWebpackPlugin#

清理 /dist 文件夹#

manifest#

使用 HtmlWebpackPlugin

清理 /dist 文件夹

manifest