webpack-plugin

plugin

plugin是插件的意思，loader主要用于转换某些类型的模块，它是一个转换器，plugin是插件，它是webpack本身的扩展，是一个扩展器。
安装plugin：
（1）通过npm安装需要使用plugins
（2）在webpack.config.js中的plugins中配置插件

示例：
在config.js文件中：
（1）添加

const  webpack  = require('webpack')

（2）在module.exports中添加：

plugins:[
      new webpack.BannerPlugin('最终版权归我所有')
    ]

打包html 的plugin

HtmlWebpackPlugin安装

1.安装插件

npm install html-webpack-plugin@3.2.0 --save -dev

2.导入插件

在configure.js中引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

在module.exports中导入插件new HtmlWebpackPlugin()

plugins:[
      new webpack.BannerPlugin('最终版权归我所有'),
      new HtmlWebpackPlugin()
    ]

index.html就被打包到dist文件中
要使dist文件中的html自动生成<div id="app"> </div> 可以根据模板自动生成，此时原来html中的<script src="./dist/bundle.js"></script> 可以删除，
在config文件中进行如下配置：

plugins:[
      new webpack.BannerPlugin('最终版权归我所有'),
      new HtmlWebpackPlugin({
        template:'index.html'
      })
    ]