webpack 文件分离-显现

提示

本手册继续使用管理资源指南中的代码示例。

至此，我们已经自动导入了index.html文件中的所有资源。 然而，随着应用程序的下降，一旦我们开始在文件名中使用哈希并输出多个bundle，如果我们继续自动管理index.html文件，就会显得很难上去。 然而，有一些插件可以使这个过程更易于管理。

预先计划

首先调整我们的项目：

项目

  webpack-demo
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- /dist
  |- /src
    |- index.js
+   |- print.js
  |- /node_modules

让我们向 src/print.js 文件添加一些逻辑：

src/print.js

export default function printMe() {
  console.log('I get called from print.js!');
}

并在 src/index.js 文件中使用此函数：

src/index.js

 import _ from 'lodash';
+import printMe from './print.js';

 function component() {
   const element = document.createElement('div');
+  const btn = document.createElement('button');

   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

+  btn.innerHTML = 'Click me and check the console!';
+  btn.onclick = printMe;
+
+  element.appendChild(btn);
+
   return element;
 }

 document.body.appendChild(component());

同时更新 dist/index.html 文件，为 webpack 拆分条目做好准备：

距离/index.html

 
 
   
     
-    
+    
+    
   
   
-    
+    
   
 

现在调整配置。 我们将 src/print.js 添加到条目中作为新的入口点（print），然后更改输出以根据入口点定义的名称动态生成包名称：

webpack.config.js

 const path = require('path');

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

执行 npm run build，然后听到生成的以下内容：

...
[webpack-cli] Compilation finished
asset index.bundle.js 69.5 KiB [emitted] [minimized] (name: index) 1 related asset
asset print.bundle.js 316 bytes [emitted] [minimized] (name: print)
runtime modules 1.36 KiB 7 modules
cacheable modules 530 KiB
  ./src/index.js 406 bytes [built] [code generated]
  ./src/print.js 83 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1996 ms

我们可以看到webpack生成了print.bundle.js和index.bundle.js文件，它们也对应于我们在index.html文件中指定的文件名。 如果您在浏览器中打开index.html，您可以看到单击该按钮时会发生什么。

但是，如果我们更改某个入口点的名称，甚至添加一个新入口点，会发生什么情况呢？ 生成的包将在创建过程中重命名webpack 文件分离，但我们的 index.html 文件仍将引用旧名称。 让我们使用HtmlWebpackPlugin来解决这个问题。

设置 HtmlWebpackPlugin

首先安装插件并调整 webpack.config.js 文件：

npm install --save-dev html-webpack-plugin

webpack.config.js

 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: '管理输出',
+    }),
+  ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

在我们创建它之前，你应该明白，虽然我们已经在 dist/ 文件夹中有了index.html 文件，但 HtmlWebpackPlugin 仍然会默认生成自己的index.html 文件。 换句话说，它将用新生成的index.html 文件替换我们的原始文件。 让我们看看执行 npm run build 后会发生什么：

...
[webpack-cli] Compilation finished
asset index.bundle.js 69.5 KiB [compared for emit] [minimized] (name: index) 1 related asset
asset print.bundle.js 316 bytes [compared for emit] [minimized] (name: print)
asset index.html 253 bytes [emitted]
runtime modules 1.36 KiB 7 modules
cacheable modules 530 KiB
  ./src/index.js 406 bytes [built] [code generated]
  ./src/print.js 83 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 2189 ms

如果您在代码编辑器中打开 index.html，您将看到 HtmlWebpackPlugin 创建了一个全新的文件，并且所有包都手动添加到 html 中。

如果您想了解 HtmlWebpackPlugin 插件提供的所有功能和选项，您应该阅读 HtmlWebpackPlugin 存储库中的源代码。

清理 /dist 文件夹

您可能已经注意到，我们的 /dist 文件夹已经变得非常混乱，其中残留着遗留的手册和代码示例。 webpack 将生成文件并将它们放置在 /dist 文件夹中，但它不会跟踪项目中实际使用的文件。

通常建议在每次构建之前清除 /dist 文件夹，以便仅生成使用的文件。 让我们使用配置项来实现这个需求。

webpack.config.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Output Management',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
+    clean: true,
   },
 };

现在webpack 文件分离，执行 npm run build 并检查 /dist 文件夹。 如果一切顺利，您现在只会听到构建后生成的文件，而不是旧的文件！

显现

不过，您可能会对 webpack 和 webpack 插件“知道”应该生成哪些文件感兴趣。 答案是 webpack 可以通过清单跟踪所有模块和输出包之间的映射。 如果你想知道如何以其他方式控制 webpack 输出，了解清单是一个很好的起点。

通过WebpackManifestPlugin插件，可以将manifest数据提取为json文件来使用。

我们不会在这里展示如何在项目中使用此插件的完整示例，您可以在清单概念页面上深入阅读，并在缓存指南中了解它与长期缓存的关系。

综上所述

现在您已经了解了如何动态地将包添加到 HTML，让我们深入了解开发环境指南。 或者，如果您想深入研究更多相关的中级主题，我们建议您访问代码分离指南。