在上一篇文章中，我体验了webpack打包，解析css资源，处理图片字体等文件。接下来看看插件是干什么的~工程路径如下，和上一篇处理图片字体等文件项一致demo├─src│├─css││├─index.css││└─file.css│├─img││├─portrait.png││└─sky.jpg│├─js││├─component.js││└─createElement.js│└─index.js├─index.html├─package.json└─webpack.config.jsclean-webpack-plugin我们使用npmrunbuild来生成打包文件夹dist，但是每次打包后，我应该删除dist并重新创建文件夹，还是直接覆盖文件一样的名字？答案是：只覆盖同名文件。我们在dist文件夹下新建一个hello.txt文件，然后通过npmrunbuild重新编译，发现hello.txt文件依然存在，说明dist文件夹没有被删除重新创建。修改webpack.config.js文件中的配置。打包后，文件名发生变化。包文件夹不会被删除，只会覆盖同名文件，这样会导致文件夹越来越大。除了每次手动删除外，还可以使用clean-webpack-plugin。通过npmiclean-webpack-plugin-D安装依赖，在webpack.config.js中配置pluginconst{CleanWebpackPlugin}=require("clean-webpack-plugin");module.exports={//其他配置省略plugins:[新的CleanWebpackPlugin()],};通过npmrunbuild再次编译，发现我们创建的hello.txt文件已经被删除，dist文件夹可以通过插件自动删除~目前使用html-webpack-plugin查看打包结果的方式是通过项目根目录下的index.html文件导入编译好的js文件，但是这种方式有两个问题。当js文件很多的时候，需要一个一个导入，release行可能会有遗漏。当编译后的dist文件夹作为静态资源使用时，需要将index.html作为入口文件包含进来，index.html作为入口文件。如果html搬过来，可能需要修改很多文件路径。html-webpack-plugin提供了自动生成html文件和导入资源的功能，可以解决以上问题。通过npminstallhtml-webpack-plugin-D安装依赖，并在webpack.config中添加ConstHtmlWebpackPluginin.js=require("html-webpack-plugin");module.exports={//其他配置省略plugins:[newHtmlWebpackPlugin({//自定义index.html标题:"hellowebpack",}),],};编译完成后入口文件bundle.js会自动导入到index.html中。html-webpack-plugin中的ejs文件是用来生成html的模板，但是比如vue和react的入口index.html文件需要加一个id为app或者root的div标签，不合适使用默认的html模板，html-webpack-plugin提供了自定义模板文件的选项。复制Vue中public文件夹下index.html的模板文件，在webpack.config.js中配置自定义模板文件module.exports={//其他配置省略plugins:[newHtmlWebpackPlugin({//自定义index标题.html标题："hellowebpack"，模板："./public/index.html",}),],};然后通过npmrunbuild编译，但是此时报错，这里没有定义BASE_URLBASE_URL需要配置全局变量，需要使用下面的插件DefinePluginDefinePlugin存在于webpck包中，不需要单独安装.const{DefinePlugin}=require("webpack");module.exports={//其他配置省略plugins:[newHtmlWebpackPlugin({//自定义index.html的标题title:"hellowebpack",template:"./public/index.html",}),newDefinePlugin({//双引号里面的内容会作为变量取出来，所以。在/BASE_URL外面加一层引号:"'./'",}),],};再次运行npmrunbuild，可以通过模板copy-webpack-plugin生成index.html在上面的html页面中引入了一个favicon.ico，在网页左上角显示图标。这个图标放在vue/react项目的public目录下。我们还在public目录下放了一个图标来展示。因为public文件下的资源是固定的，可以直接复制到编译好的文件夹下导入使用。这里使用copy-webpack-plugin来操作。通过npmicopy-webpack-plugin-D安装后，在webpack.config.js中进行配置。constCopyWebpackPlugin=require("copy-webpack-plugin");module.exports={//其他配置省略plugins:[newHtmlWebpackPlugin({//自定义index.html的标题title:"hellowebpack",template:"./public/index.html",}),newDefinePlugin({//双引号里面的内容会作为变量取出来，所以要在外面加一层引号./BASE_URL:"'./'",}),newCopyWebpackPlugin({//匹配复制文件模式的规则：[{from:"public",},],}),],};仅仅配置复制文件的来源是不够的，因为HtWebpackPlugin已经处理了如果创建一次html，你会得到一个错误index.html文件冲突。在上述模式中，需要添加忽略文件的配置模式：[{from:"public",globOptions:{//如果忽略文件在from属性配置的文件夹中，需要添加**/忽略：文件名前的["**/index.html"],},},]；再次运行npmrunbuild，图标已经复制到dist文件夹下，网页左上角也可以成功显示通过clean-webpack-plugin自动删除编译好的文件夹，html-webpack-plugin配置html模板，definePlugin定义全局变量，copy-webpack-plugin复制public下的静态资源，使项目资源处理更简单。更多关于webpack的内容可以参考我的其他博文，持续更新中~
