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

写在前面

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

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

插件机制

webpack每次打包的结果都是亿华云计算直接覆盖到dist目录，打包前，践w件机建dist目录中可能已经存在上一次打包操作时遗留的何利文件，再次打包时，制横展构只能覆盖掉同名文件，向扩已经移除的原用插资源文件会一直累积在里面，最终导致部署上线时出现多余文件。理实力很明显这是践w件机建不合理的。

更好的服务器托管何利做法当然是：在每次完整打包浅，自动明清理dist目录，制横展构每次打包过后，向扩dist目录中就只会存在那些必要的原用插文件。我们可以依赖第三方npm包：clean-webpack-plugin。理实力安装后回到webpack的践w件机建配置文件中，导入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"); 

打包压缩后的代码：

/高防服务器

很赞哦!（295）