八、webpack3.x之plugins配置

webpack中的配置文件webpack.config.js进行plugins配置：plugins是什么、plugins与loader的区别、plugins分类、plugins使用方法、 插件详解：添加版权注释、插件详解：html模板、插件详解：单独提取css、插件详解：清除生成的文件等内容。

（1）plugins是什么

• webpack 提供插件机制，可以对每次 build 的结果进行处理。

（2）plugins与loader的区别

• loaders和plugins常常被弄混，但是他们其实是完全不同的东西：
  • loaders是在打包构建过程中用来处理源文件的（jsx，scss，less..），一次处理一个，一类文件；
  • plugins插件并不直接操作单个文件，它直接对整个构建过程其作用。

（3）plugins分类

• 内置插件：webpack内置方法，不需要安装依赖包，直接通过webpack.BannerPlugin直接使用。
  • BannerPlugin，在最后生成的js文件中添加注释。
  • HotModuleReplacementPlugin，热加载，它允许在修改组件代码后，自动刷新实时预览修改后的效果。
• 第三方插件：需要安装npm依赖包，cnpm install html-webpack-plugin —save-dev。
  • html-webpack-plugin
    • HtmlWebpackPlugin，这个插件的作用是依据一个简单的模板，帮助生成最终的Html5文件，这个文件中自动引用了打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。
    • 默认情况下，会在 页面自动输出路径里面生成一个index.html，并将输入的脚本加载进来。
    • 可以设置，具体参数见：https://github.com/jantimon/html-webpack-plugin#configuration
  • extract-text-webpack-plugin，单独提取css文件
  • clean-webpack-plugin，清楚冗余文件。

（4）plugins使用方法

• 配置 plugins 的方法为在 webpack.config.js 中添加
• webpack 提供插件机制，可以对每次 build 的结果进行处理。
• plugins可以携带参数/选项，向plugins属性传入new实例。常见配置如下：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require("clean-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");//将css单独提取出来，放一个文件里面。

module.exports = {
	plugins: [
        new webpack.BannerPlugin('将css单独分离出来！'),//压缩文件，注释
        new HtmlWebpackPlugin({
            template: __dirname + "/static/html/extract.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin(),//热加载插件
        new CleanWebpackPlugin('./dist/build-extract/*', {//清除dist目录
            root: __dirname,
            verbose: true,
            dry: false
        }),
        new ExtractTextPlugin("custom.css"),//合并css
    ]
};

• plugin 也是一个 npm 模块，安装一个 plugin ：

$ npm install bell-on-bundler-error-plugin --save-dev

（5）插件详解：添加版权注释

• webpack插件内置方法
• 直接在plugins中使用，直接new一个对象，通过webpack直接调用。
• new webpack.BannerPlugin(‘我是一行注释！’)

（6）插件详解：html模板

• 安装npm包： html-webpack-plugin
• 在配置文件webpack.config.js的plugin中new一个对象：new HtmlWebpackPlugin({options})。
• 参数详解：
  • title：标题
  • filename：生成的html文件

  • inject：”true

    body

    header ”，js引入的位置。默认true，并且true和body一样，都放到底部。

  • hash：添加hash值，去缓存
  • template：添加自定义模板
• 默认不加配置时，直接生成一个html页面，只引用output中的js。
  • webpack.config.js的plugins中增加：new HtmlWebpackPlugin()
  • 生成的html模板页面：index.html

（7）插件详解：单独提取css

• 安装npm包：extract-text-webpack-plugin

（8）插件详解：清除生成的文件

• 安装npm包：clean-webpack-plugin

• clean-webpack-plugin参数说明

  • root，默认__dirname，一个根的绝对路径。

  • verbose，默认：true，将log写到 console。

  • dry，默认：false。删除文件，为true则不删除，主要用于测试。

  • watch，默认：false。为true则只删除重新编译的文件。

  • exclude，排除不删除的目录，主要用于避免删除公用的文件。

  • allowExternal，默认：false - 不允许在webpack根目录之外的干净的文件夹。

    ​

详见【demo07-12】