webpack核心概念_（第三章）_使用plugins让打包更便捷

刺骨的言语ヽ痛彻心扉 2021-12-23 14:07 286阅读 0赞

在webpack中使用不同的loader可以完成不同文件类型的打包，这一篇写如何使用webpack中的plugins,让打包更便捷。  
在打包完成的dist文件下有个index.html文件，这个是我们手动拷贝到dist文件夹下，目的是可以方便访问打包生成之后的js文件。但是每次打包都要拷贝该index.html文件很麻烦，有什么办法可以帮助我们解决这个问题呢？  
可以利用webpack的插件帮我们实现  
Webpack---->PLUGINS----->HtmlWebpackPlugin  
webpack的插件如何使用？  
1.首先安装插件  
`npm install -D html-webpack-plugin // 先安装插件`  
2. 在webpack.config.js中引入这个webpack的插件，在配置的对象里面有一个plugins配置属性，把对应的插件在这里实例化

var HtmlWebpackPlugin = require('html-webpack-plugin')
      output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
      },
      plugins: [new HtmlWebpackPlugin()]

我们将dist文件删除，重新打包运行项目  
![在这里插入图片描述][20190626112549304.png]  
发现dist目录下会自动生成一个index.html文件  
![在这里插入图片描述][20190626112820865.png]  
还帮我们在打包出来的index.js文件引入到这个html当中  
**HtmlWebpackPlugin插件的作用**  
HtmlWebpackPlugin插件会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中  
问题是生成的html文件是没有root div的，当我们在index.js中引用，是会报错的  
![在这里插入图片描述][20190705100458381.png]  
在生成的html文件中加上root标签就不会有问题了![在这里插入图片描述][20190705100753338.png]  
如果我们想在打包的时候自动生成id为root的标签要怎么做呢，我们可以在webpack.config,js中的plugin做一个配置，做一个模板配置  
![在这里插入图片描述][20190705155201805.png]  
在src下面建一个index.html的文件就可以按照这个模板去生成了  
HtmlWebpackPlugin的作用是当打包完成后会生成一个html文件，生成的html文件会以src目录下的index.html文件为模板，然后会将打包的js注入到该html文件中。

**webpack中plugin的作用**  
plugin可以在webpack运行到某个时刻，帮你做  
plugin很像vue的生命周期函数。例如HtmlWebpackPlugin会在某一时刻（打包结束的时候）自动帮你做一些事情，其他的一些插件会在另外的时刻帮助webpack来做一些事情。  
再介绍另外一个plugin  
当我们修改output 生成js的文件名的时候，例如将index.js改为dist.js，打包打包发现会生成dist.js文件。index.html也会引用该文件，但是以前打包生成的index.js并没有删除，有的时候就会造成问题，希望在重新打包的时候，能够自动的帮助我们把dist目录先删除然后再去执行打包，要实现这个功能，就要借助CleanWebpackPlugin

1.  首先安装CleanWebpackPlugin `npm install clean-webpack-plugin -D`
2.  在webpack.config,js引用、在plugin数组中配置

var CleanWebpackPlugin = require('clean-webpack-plugin')
    ......
      plugins: [new HtmlWebpackPlugin({
        template: 'src/index.html'
      }), new CleanWebpackPlugin (['dist'])]  // 在打包之前使用CleanWebpackPlugin 插件帮助我们删除dist文件

1.  打包运行就可以了

**综上如果想在webpack某些打包的结点上去做一些操作，就可以使用各种各样的插件来帮助我们实现这样的功能。**

[20190626112549304.png]: /images/20211223/040457ad312446f3acf2473ed619b8b7.png
[20190626112820865.png]: /images/20211223/03e52ddf2bb74a7e9385d79655eeec97.png
[20190705100458381.png]: /images/20211223/7b8a0bd132bf4e5a93465869d2301a5e.png
[20190705100753338.png]: /images/20211223/9e7e12f07d5c48a7814740f8df8fa795.png
[20190705155201805.png]: /images/20211223/14cca560a3484fb68e4f3f7c9afedf96.png