Webpack原理与实践：webpack如何利用插件机制横向扩展构建能力？-webpack 插件原理

[[441092]]

写在前面

webpack插件机制的目的是：为了增强webpack在项目自动化构建方面的能力。插件最常见的应用场景是：

实现自动在打包之前清除dist目录(上次打包的结果)
自动生成应用所需的html文件
根据不同环境为代码注入类似API地址这种可能变化的部分
拷贝不需要参与打包的资源文件到输出目录
压缩webpack打包完成后输出的文件
自动发布打包结果到服务器实现自动部署

插件机制

webpack每次打包的结果都是直接覆盖到dist目录，打包前，dist目录中可能已经存在上一次打包操作时遗留的文件，再次打包时，只能覆盖掉同名文件，已经移除的资源文件会一直累积在里面，最终导致部署上线时出现多余文件。很明显这是不合理的。

更好的做法当然是：在每次完整打包浅，自动明清理dist目录，每次打包过后，dist目录中就只会存在那些必要的文件。我们可以依赖第三方npm包：clean-webpack-plugin。安装后回到webpack的配置文件中，导入clean-webpack-plugin插件，该插件模块导出CleanWebpackPlugin。

//webpack.config.js 
const path = require("path") 
const {CleanWebpackPlugin} = require("clean-webpack-plugin") 
module.exports = { 
  entry:"./src/index.js", 
  output:{ 
    filename:"bundle.js", 
  }, 
  mode:"none", 
  plugins:[ 
    new CleanWebpackPlugin() 
  ] 
}

// src/index.js 
console.log("nihao nihao");

打包压缩后的代码：

/******/ (() => { // webpackBootstrap 
var __webpack_exports__ = {}; 
console.log("nihao nihao"); 
/******/ })() 
;

我们知道html文件一般都是通过硬编码的方式，单独存放在项目的根目录下，这种方式有两个问题：

项目发布时，我们需要同时发布根目录下的html文件和dist目录中所有打包的打包结果，非常麻烦，而且上线后还要确保html代码中的资源文件正确
如果打包结果输出的目录或文件名发生变化，那么html代码中对应的script标签需要我们手动修改路径

为此webpack也有相关的插件自动生成html，相对于之前写死html文件的方式，自动生成html的优势在于：

html也输出到dist目录中，上线时只需要把dist目录发布出去
html中的script标签是自动引入的，所以可以确保资源文件的路径是正常的

安装后回到配置文件，载入此模块，相对于clean-webpack-plugin需要解构内部成员所不同，html-webpack-olugin插件默认导出的就是插件类型。

对于生成的html文件，页面的title需要修改，许多时候还需要我们自定义页面的一些meta标签和基础dom结构。

const path = require("path") 
const {CleanWebpackPlugin} = require("clean-webpack-plugin") 
const HtmlWebpackPlugin = require("html-webpack-plugin") 
module.exports = { 
  entry:"./src/index.js", 
  output:{ 
    filename:"bundle.js", 
  }, 
  mode:"none", 
  plugins:[ 
    new CleanWebpackPlugin(), 
    new HtmlWebpackPlugin({ 
      title:"hello webpack", 
      template:"./src/index.html" 
    }) 
  ] 
}

指定要打包的html文件：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title><%= htmlWebpackPlugin.options.title %></title> 
</head> 
<body> 
  <div class="container"> 
    <h1>页面结构</h1> 
    <div id="root"></div> 
  </div> 
</body> 
</html>

这样就自动生成了一个html文件：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>hello webpack</title> 
<script defer src="bundle.js"></script></head> 
<body> 
  <div class="container"> 
    <h1>页面结构</h1> 
    <div id="root"></div> 
  </div> 
</body> 
</html>

html-webpack-olugin除了可以自定义输出文件内容，同时还可以输出多个html文件，通过HtmlWebpackPlugin创建的对象是用于生成index.html文件的，玩去哪可以再创建一个新的实例对象，用于创建额外的html文件。

对于项目中一些不需要参与构建的静态文件如：网站的favicon、robots.txt文件等，但是需要发布在线上。那么可以将这类文件统一放在根目录下的public或static目录中，希望webpack在打包时一并将这个目录下所有的文件复制到输出目录，这种需求可以使用copy-webpack-plugin插件的实现。

plugins:[ 
  new CleanWebpackPlugin(), 
  new HtmlWebpackPlugin({ 
    title:"hello webpack", 
    template:"./src/index.html" 
  }), 
  new CopyWebpackPlugin([ 
    "public"//需要拷贝的目录或者路径 
  ]) 
]

参考文章

《webpack原理与实践》
《webpack中文文档》

写在最后

简单了解了几个常用的插件，一般适合用于任何类型的项目，不管是否使用了框架。webpack为每个工作环节都预留了合适的钩子，扩展时只需要找到合适的时机去做合适的事情。