【webpack】快速笔记5 -- plugins（html-webpack-plugins与clean-webpack-plugin）

本文链接：https://blog.youkuaiyun.com/Umbrella_Um/article/details/100103619

html-webpack-plugins

官方文档： https://www.webpackjs.com/plugins/html-webpack-plugin/

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

直接看文档，主要就是打包的时候会自动生成的index.html，解决了每次删除打包输出文件夹后，再次打包没有index.html的现象；

拓展

  plugins: [new HtmlWebpackPlugin({
	template: 'src/index.html'
  })]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Html模板</title>
</head>
<body>
    <div class="" id="app"></div>
</body>
</html>

此时打包后在的index.html变成了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Html模板</title>
</head>
<body>
    <div class="" id="app"></div>
	<script type="text/javascript" src="bundle.js"></script></body>
</html>

多了一个带有app的divDom节点，那么此时满足了index.js入口文件的需求：

import './index.scss';

var app = document.getElementById('app');
app.innerHTML = '<div class="iconfont iconComputingPlatform-blue"></div>';

plugins的作用

plugins就像生命周期函数，在webpack打包的某一时刻做一些事情

html-webpack-plugin就是在打包后自动运行的插件
clean-webpack-plugin在打包前自动运行的插件

clean-webpack-plugin

用于清除上一次不同名字的输出打包js文件

    plugins: [
        new HtmlWebpackPlugin({
        template: 'src/index.html'
    }),
        new CleanWebpackPlugin(['dist'])
    ],

如果需要清除上一次不同的打包名可以这样配置,dist就是打包文件js的名称，有必要吗手动删除不就行了吗，花里胡哨的…

++++++++++++++++++++++++++++++++++++++clean-webpack-plugin报错++++++++++++++++++++++++++++++++++++++++++++
随着webpack4.3x.0的到来，clean-webpack-plugin官网做了更改，配置上也有更新，现在导入该插件需要通过解构的方式，代码如下：

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
plugins: [
     new CleanWebpackPlugin();
],

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

其实管方解释为clean-webpack-plugin的作用：
你可能已经注意到，由于过去的指南和代码示例遗留下来，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。

通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。

参考文档：
https://www.webpackjs.com/guides/output-management/#清理-dist-文件夹

结语

关于Plugins的webpack插件还有很多，后续用到也会提及，这里就只讲两个先

#下一篇讲【如何打包多个压缩js文件及output相关配置~】