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

以上文章来自:黄卉 , https://huanghui8030.github.io/webpack/plugins.html