共计 2294 个字符,预计需要花费 6 分钟才能阅读完成。
导读 | 简单了解了几个常用的插件,一般适合用于任何类型的项目,不管是否使用了框架。webpack 为每个工作环节都预留了合适的钩子,扩展时只需要找到合适的时机去做合适的事情。 |
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 为每个工作环节都预留了合适的钩子,扩展时只需要找到合适的时机去做合适的事情。
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)