webpack自动引入资源 —— 插件 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第4天

自动引入资源

到目前为止测试的案例都是在 index.html 文件中手动引入所有资源，然而随着应用程序增长，如果继续手动管理 index.html 文件，就会变得困难起来。然而，通过一些插件可以使这个过程更容易管控。

插件

插件是webpack的核心功能。插件可以用于执行一些特定的任务，包括：打包优化，资源管理，注入环境变量等。Webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。
Webpack 提供很多开箱即用的插件【可在官网查看：webpack (docschina.org) 】
注意webpack的打包流程：

eg:使用 HtmlWebpackPlugin

安装插件【本地】：

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

在webpack.config.js里进行配置：

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    //... 
    module.exports = { 
         //...      
         plugins: [
             // 实例化 html-webpack-plugin 插件 
             new HtmlWebpackPlugin() 
         ] 
     }

命令行执行 npx webpack 进行打包，可以观察到打包后的dist文件夹，结构如下：
- 打包后，我们发现这个 dist/index.html 似乎与先前的 index.html 并没有关系， HtmlWebpackPlugin 会默认生成它自己的 index.html 文件，并且所有的 bundle（bundle.js）会自动添加到 html 中。那么：
- 能否基于原有的 index.html 文件打包生成新的 index.html 呢？

基于原有的 index.html 文件打包生成新的 index.html

再次调整 webpack.config.js 文件：

    module.exports = {
      // 配置插件
      plugins: [
        // 必须new以下这个对象/构造函数;传入一个对象来控制配置
        new HtmlWebpackPlugin({
          // 设置打包生成的文件模板【基于什么模板来生成app.html】
          template: './index.html',
          // 设置打包成的文件名
          filename: 'app.html',
          // 设置所有资源文件注入模板的位置。
          // 可以设置的值 true|'head' ， 'body' | false
          // 默认值为 true的位置
          inject: 'body',
        }),
      ],

再次打包可观察到生成的文件结构如下：

这次打包应用到了我们的模板文件 index.html , 并且生成了新的文件 app.html , 文件里自动引用的 bundle.js 也从 <header> 迁移到了 <body> 里。

清理dist：打包时自动清理原本的dist文件夹

仔细留意一下，我们发现 dist/index.html 仍旧存在，这个文件是上次生成的残留文件，已经没有用了。可见，webpack 将生成文件并放置在 /dist 文件夹中，但是它不会追踪哪些文件是实际在项目中用到的。通常比较推荐的做法是，在每次构建前清理 /dist文件夹，这样只会生成用到的文件。而 output.clean 配置项同样可以实现这个需求。
```
    //在webpack.config.js文件中进行配置
    module.exports = {
        //... 
        output: { 
        //...        
        // 打包前清理 dist 文件夹 
        clean: true 
        },
    } 
```

再次打包：

webpack自动引入资源——插件 | 青训营笔记

webpack自动引入资源 —— 插件 | 青训营笔记

自动引入资源

插件

eg:使用 HtmlWebpackPlugin