(webpack篇)3.webpack中plugin概念：在webpack的构建流程中，plugin用于处理更多其他的一

概念：在webpack的构建流程中，plugin用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由loader来处理，除此之外的其他任何工作都可以交由plugin来完成。通过添加我们需要的plugin，可以满足更多构建中特殊的需求。
PS:plugin可以在webpack运行到某个时刻的时候，帮你做一些事情

一、HtmlWebpackPlugin

说明：会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中

1.安装 npm install html-webpack-plugin -D
2.配置文件中设置 webpack.config.js 中

const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入安装的plugin
const path = require('path')
module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin({ // 这里是根据这个src目录下的index.html模板创建样式
            template: './src/index.html'
        })
    ],
    ...
}

3.html模板 src/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>html 模板</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

4.打包结果
5.补充使用的src/index.js

import './index.scss';
var root = document.getElementById('root');
root.innerHTML = '<div class="iconfont iconmenzhentijian"></div>'

案例图

6.说明这里使用的html模板打包，通过配置自定义的标签，结合使用的plugin插件，可以生成打开页面，非常方便。

二、CleanWebpackPlugin

说明：打包生成文件之前，先清空打包目录下的内容

1.安装 npm install -D clean-webpack-plugin
2.在webpack.config.js中配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path')

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

3.说明当我们使用这个插件之后，每次打包前都会清空dist目录下的文件。

PS：后续会慢慢补充各种plugin