webpack插件基础--webpack-plugin（二）

webpack-plugin基础

如何创建webpack打包之后的 js 文件

npm安装webpack-plugin :

npm i -D -webpack-plugin

使用前配置

1. 在webpack.config.js文件的module.export中设置plugin的字段，字段接收一个数组，数组里面为我们所要使用的webpack相关插件

2. 在设置字段之前，需要先将webpack-plugin这个插件引进来

const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

3. 在 plugin 字段所接收的数组中 new 一个 HtmlWebpackPlugin 即可

plugins:[ new HtmlWebpackPlugin （）]

4. 使用插件： 直接运行webpack命令（根据我们之前的设置 命令为：npm run dev），将项目打包之后，在打包文件所存放的文件下就会自动生成一个index.html的文件，并且已经将打包好的js文件引入，这样直接在浏览器打开index.html就可以运行项目了

如何将已有的HTML文件，一起加载到打包好的HTML文件中

在webpack.config.js文件中，我们刚刚配置好的 plugins字段的 new HtmlWebpackPlugin （） 传入对象

代码如下

**const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'apc.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'aac.html',
            template: 'src/index.html'
        })
    ]
};**