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

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

[[441092]]

写在前面

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

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

插件机制

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

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

  1. //webpack.config.js 
  2. const path = require("path"
  3. const {CleanWebpackPlugin} = require("clean-webpack-plugin"
  4. module.exports = { 
  5.   entry:"./src/index.js"
  6.   output:{ 
  7.     filename:"bundle.js"
  8.   }, 
  9.   mode:"none"
  10.   plugins:[ 
  11.     new CleanWebpackPlugin() 
  12.   ] 
  1. // src/index.js 
  2. console.log("nihao nihao"); 

打包压缩后的代码:

  1. /******/ (() => { // webpackBootstrap 
  2. var __webpack_exports__ = {}; 
  3. console.log("nihao nihao"); 
  4. /******/ })() 
  5. ;        

我们知道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结构。

  1. const path = require("path"
  2. const {CleanWebpackPlugin} = require("clean-webpack-plugin"
  3. const HtmlWebpackPlugin = require("html-webpack-plugin"
  4. module.exports = { 
  5.   entry:"./src/index.js"
  6.   output:{ 
  7.     filename:"bundle.js"
  8.   }, 
  9.   mode:"none"
  10.   plugins:[ 
  11.     new CleanWebpackPlugin(), 
  12.     new HtmlWebpackPlugin({ 
  13.       title:"hello webpack"
  14.       template:"./src/index.html" 
  15.     }) 
  16.   ] 

指定要打包的html文件:

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.   <meta charset="UTF-8"
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge"
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0"
  7.   <title><%= htmlWebpackPlugin.options.title %></title> 
  8. </head> 
  9. <body> 
  10.   <div class="container"
  11.     <h1>页面结构</h1> 
  12.     <div id="root"></div> 
  13.   </div> 
  14. </body> 
  15. </html>

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

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.   <meta charset="UTF-8"
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge"
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0"
  7.   <title>hello webpack</title> 
  8. <script defer src="bundle.js"></script></head> 
  9. <body> 
  10.   <div class="container"
  11.     <h1>页面结构</h1> 
  12.     <div id="root"></div> 
  13.   </div> 
  14. </body> 
  15. </html> 

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

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

  1. plugins:[ 
  2.   new CleanWebpackPlugin(), 
  3.   new HtmlWebpackPlugin({ 
  4.     title:"hello webpack"
  5.     template:"./src/index.html" 
  6.   }), 
  7.   new CopyWebpackPlugin([ 
  8.     "public"//需要拷贝的目录或者路径 
  9.   ]) 

参考文章

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

写在最后

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

 

责任编辑:姜华 来源: 前端万有引力
相关推荐

2021-12-20 00:03:38

Webpack运行机制

2021-12-24 08:01:44

Webpack优化打包

2021-12-16 22:02:28

webpack原理模块化

2021-12-15 23:42:56

Webpack原理实践

2021-12-25 22:29:04

WebpackRollup 前端

2009-12-11 10:29:03

PHP插件机制

2017-03-24 10:56:21

Webpack技巧建议

2017-05-02 16:29:11

Webpack技巧建议

2020-08-05 08:21:41

Webpack

2021-12-17 00:02:28

Webpack资源加载

2021-07-04 22:22:23

Webpack5前端工具

2021-12-22 22:44:49

Webpack热替换模块

2022-03-08 09:16:20

webpack前端开发

2021-05-31 05:36:43

WebpackJavaScript 前端

2011-06-09 17:26:17

Qt 插件 API

2023-11-07 10:19:08

2010-09-08 14:39:35

2020-11-17 08:09:01

webpack配置项脚手架

2021-06-22 06:52:46

Vite 插件机制Rollup

2021-04-19 10:45:52

Webpack热更新前端
点赞
收藏

51CTO技术栈公众号