4.4 使用插件
我们发现在构建的过程中，如果构建后的资源名称发生了变化，index.html 中对资源的引用会被动地跟着修改，非常不方便，我们引入 HtmlWebpack Plugin 来帮助我们自动生成入口文件，自动将生成的资源文件注入 index.html 中。
安装：
npm install --save-dev html-Webpack -plugin
配置：
const path = require("path"); const HtmlWebpack Plugin = require("html-Webpack -plugin"); module.exports = { entry: "./src/index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "dist") }, plugins: [new HtmlWebpack Plugin()] };
在配置文件中，我们引入插件，并在 plugins 选项中，将插件实例化后添加到数组中。该插件会自动生成 index.html，因此原目录中的 index.html 文件可以删除。
Webpack -demo ├── package.json ├── Webpack .config.js ├── dist | └── bundle.js └── src └── index.js
再次执行构建命令：
$ npm run build > Webpack -demo@1.0.0 build C:\work\tech\Webpack -demo > Webpack Hash: 39dc7567ef99a69140e7 Version: Webpack 4.29.6 Time: 1241ms Built at: 2019-04-03 22:53:44 Asset Size Chunks Chunk Names bundle.js 1 KiB 0 [emitted] main index.html 182 bytes [emitted] Entrypoint main = bundle.js [0] ./src/index.js 175 bytes {0} [built]
命令执行后我们发现我们的 ./dist 下多了一个 index.html 文件，并且 index.html 中的资源引用被自动更新为了 <script type="text/javascript" src="bundle.js"></script>。
4.5 使用 loader 处理 css 文件
为了使 Webpack 可以处理 import 进来的 css 文件，我们需要安装并配置 style-loader 和 css-loader。
npm install --save-dev style-loader css-loader
修改 Webpack 的配置如下：
const path = require("path"); const HtmlWebpack Plugin = require("html-Webpack -plugin"); module.exports = { entry: "./src/index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "dist") }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"] } ] }, plugins: [new HtmlWebpack Plugin()] };
如此一来，当 Webpack 匹配到后缀为 .css 的文件都会使用 css-loader 和 style-loader 进行处理。
接下来我们在 ./src 目录下新增一个样式文件 main.css。在样式中，设置文本的字体颜色为红色。
// main.css div{color: red}
紧接着我们在 ./src/index.js 中引用 main.css：
import "./main.css"; function createEl() { var element = document.createElement("div"); element.innerHTML = "hello world"; return element; } document.body.appendChild(createEl());
执行构建命令：
$ npm run build > Webpack -demo@1.0.0 build C:\work\tech\Webpack -demo > Webpack Hash: f9fcb8cfd689f4b96ce6 Version: Webpack 4.29.6 Time: 2672ms Built at: 2019-04-03 23:24:40 Asset Size Chunks Chunk Names bundle.js 6.85 KiB 0 [emitted] main index.html 182 bytes [emitted] Entrypoint main = bundle.js [0] ./src/index.js 199 bytes {0} [built] [1] ./src/main.css 1.05 KiB {0} [built] [2] ./node_modules/css-loader/dist/cjs.js!./src/main.css 170 bytes {0} [built] + 3 hidden modules
在浏览器预览，不出意外字体的颜色已经变成了红色，打开浏览器调试工具，可以看到在 <head> 标签里插入了一个 <style> 标签。
<style type="text/css"> div { color: red; } </style>
通过以上完整的示例，我们演示了 Webpack 的核心的几个配置的使用方式，我们对 Webpack 的使用应该有了一个基本的认识。
Webpack 中还有很多其他有用的配置项，篇幅原因不做详细的介绍。大家可以查阅 官方文档 自行配置和练习。
总结
本节我们对 Webpack 进行了总体的介绍。借助 loader、Webpack 可以处理一切资源，JS 的、非 JS 的，都可以。通过插件，我们可以在 Webpack 的构建过程中的每个事件节点加入自己的行为，来影响 Webpack 的构建。对 Webpack 的使用有了认识，可以为我们搭建起项目的基本框架提供一个基础。
笔者有一个前端工程化的实践型课程刚刚上线——《透视前端工程化》。
以 Vue 为例，结合笔者在团队中的工程化实践，带领大家从零开始搭建一个脚手架，将搭建脚手架用到的技术点逐一拆解，希望大家看完后，每个人都对脚手架和工程化思想有个较深入地理解。
相信在学完本课程后，大家至少有以下几点收获：
- 对前端工程化有一个系统认知；
- 能独立设计一套前端工程化解决方案；
- 知识广度上有大幅提升；
- 进入更好的平台，获得更好的薪酬。
