深入了解 Webpack Plugins

Webpack 是一个非常好用的打包工具，如果只是想单纯地使用基本功能的话，它非常的好理解。 相信有看过教学的人都对以下这段基本配置相当熟悉：

// webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

但现实总是与理想不同，一旦你开始想使用一些进阶功能时，就会开始遇到各式各样的 Plugins。由于在网络上除了官网的介绍之外，很少找到有把 Plugins 整合起来并介绍的文章，因此，本篇将针对常用到的 Plugins 做简易的介绍。

Hot Module Replacement Plugin

一般来说，Hot Module Replacement Plugin 通常会搭配 Webpack dev server 一起使用。 它提供类似于 Live Reload 的功能，一旦你的代码有做变更，此 Plugin 会直接更新画面并做出相对应的变化。

通常会使用到 Hot Module Replacement Plugin 的时机是当 webpack dev server 不是通过 inline mode 做启动时。

webpack-dev-server 有两种启动模式：

第一种是教学中常见到的：

$ webpack-dev-server --devtool eval --progress --colors --hot --content-base build

这就是所谓的 inline mode，指令中的 –hot 会自动将 Hot Module Replacement Plugin 的功能加入，因此，我们不用特地到 webpack.config.js 内做配置。

另一种启动 webpack dev server 的方式则是通过程序：

var webpack = require('webpack'),
    WebpackDevServer = require('webpack-dev-server'),
    webpackConfig = require('../webpack.config.js');

module.exports = function() {
    var compiler = webpack(webpackConfig);

    var bundler = new WebpackDevServer(compiler, {
        publicPath: '/build/',
        hot: true,
        quiet: false,
        noInfo: true,
        stats: {
            colors: true
        }
    });

    bundler.listen(8080, 'localhost', function() {
        console.log('Webpack-dev-server is live on port 8080');
    });
};

当使用这种方式启动 webpack dev server 时，我们就必须记得到 webpack.config.js 内加入 Hot Module Replacement Plugin 的配置，如下：

//webpack.config.js

//...other webpack settings

plugins: [
    new Webpack.HotModuleReplacementPlugin()
]

Commons Chunk Plugin

Commons Chunk Plugin 的用法复杂且多样，本文只针对基本用法做介绍。

此 Plugin 其中之一的用途是在于分离第三方套件与项目内部代码。由于项目内部代码会不断做更新，而第三方套件一般来说修改的频率较低，如果没有与第三方套件分开打包的话，使用者在每一次更新后都必须下载第三方套件加上项目内部代码的一整包文件，使项目运行起来的速度变慢，并降低用户体验。

此 Plugin 使用方式如下：

var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.resolve(__dirname, 'node_modules');

var config = {
  entry: {
    app: path.resolve(__dirname, 'app/main.js'),
    vendors: ['react', 'jquery', 'bootstrap']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: [node_modules_dir],
      loader: 'babel'
    }]
  },
  plugins: [
    // 第一个参数对应到 entry 内的属性名
    // 第二个参数是输出文件的名称
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
  ]
};

module.exports = config;

以上配置会打包成 app.js 与 vendors.js 两个文件。

Provide Plugin

你有遇到将 jquery 和 bootstrap 打包到 vendors 却出现 Uncaught ReferenceError: jQuery is not defined 的问题吗？ Provide Plugin 会是解决这个问题的一种办法。

我们先来看看解法再来探讨它的用处：

//webpack.config.js

//...other webpack settings

plugins: [
    new Webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'root.jQuery': 'jquery'
    }),
]

Provide Plugin 的主要功能是当在程式中遇到特定字符且没被定义时会自动加载特定模块。上例的配置是在碰到  直接使用 $(“#item”) 时，程式不会报错。

而本段落初所碰到的问题正是在 bootstrap 中有使用 jquery 却没定义的情况，因此只要做了以上配置，bootstrap 就能正常引用 jquery 的功能了。

No Errors Plugin

此 Plugin 主要功能是在代码出错时，不会将有错误的代码打包以确保打包完后的代码语法上的正确性。比较容易会碰到的问题是，当有使用 eslint-loader 来为 ES6 做语法检查时，不管是 warning 或是 error 都会使 No Error Plugin 停止打包。

同时使用此 Plugin 与 eslint-loader 的配置有好有坏，好处是你的代码必须干净到连 warning 都没有才能正常打包。坏处则是检查太严格，有些开发者可能不习惯这样的模式。当你想要保有检查 es6 语法功能却又不想被这么严苛的对待时，就把 No Errors Plugin 拿掉吧。

Extract Text Plugin

大家都知道在 webpack 中 CSS 是可以被 require() 的，webpack 会自动生成一个

//webpack.config.js

//...other webpack settings

plugins: [
    new ExtractTextPlugin('app.bundle.css')
]

以上配置会输出一个 app.bundle.css 的文件。

UglifyJsPlugin

UglifyJsPlugin 的功能正如其名，它会压缩 javascript 档。在 webpack -p 也就是 production mode 时会自动执行。这边特别提出来的原因在于有时会在压缩时有一些多余的警告 (Side effects in initialization of unused variable define) 跑出来，如果你也像我一样龟毛不喜欢看到警告的话，你可以在 webpack.config.js 内做以下配置：

//webpack.config.js

//...other webpack settings

plugins: [
    new Webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]

上述代码只是把压缩时的警告关上而已。

HtmlWebpackPlugin

最后与各位分享的是一个非官方的 Plugin。html-webpack-plugin 能够动态产生 index.html 并支持 Extract Text Plugin 自动将打包完后的 js 与 css 档加入。

基本使用方法如下：

//webpack.config.js

//...other webpack settings

plugins: [
    new HtmlWebpackPlugin()
]

以上配置会自动生成一个基本的 index.html 并将打包过后的 js 和 css 档通过

总结

写了这么长一篇的 Webpack Plugins 介绍，希望花时间看完的你有一些收获。但这些也都只是 Webpack 冰山一角而已，除了 plugins 之外，还有各式各样的 loaders

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » 深入了解 Webpack Plugins