Webpack原理与实践

共计 2294 个字符，预计需要花费 6 分钟才能阅读完成。

webpack 插件机制的目的是：为了增强 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 文件一般都是通过硬编码的方式，单独存放在项目的根目录下，这种方式有两个问题：

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

安装后回到配置文件，载入此模块，相对于 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 文件：

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 为每个工作环节都预留了合适的钩子，扩展时只需要找到合适的时机去做合适的事情。

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配

腾讯云新客低至 82 元 / 年，老客户 99 元 / 年

代金券：在阿里云专用满减优惠券