Webpack框架知识整理——Plugins

Posted volinvan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack框架知识整理——Plugins相关的知识,希望对你有一定的参考价值。

5 Plugins 插件

  5.1 我们的nodejs系统上充满了插件,webpack也是基于各种插件才能正常工作的,插件对于webpack来说是一个非常重要的支柱,用于解决loader不能实现的很多事情。

  插件:

    插件是一个具有 apply 属性的javascript对象,其中apply属性会被webpack compiler调用,compiler对象可以在整个编译生命周期进行访问;

    function LogOnBuildWebpackPlugin() {

    };
    //通过 Function.prototype.apply把一个函数作为插件传递,在配置中这样可以内联自定义插件
    LogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
       compiler.plugin(‘run‘, function(compiler, callback) {
          console.log("Hello,Let‘s start!");
          callback();  
       });
    };
  5.2 插件可以携带参数/选项,在 webpack 配置中必须向 plugins 属性传入 new 实例,如下面代码所示。
    const htmlWebpackPlugin = require(‘html-webpack-plugin‘); 
    const webpack = require(‘webpack‘); 
    ...

    const config = {
      entry: ...
      output: {
        ...
      },
      module: {
        ...
    },
    plugins: [
      new webpack.optimize.UglifyJsPlugin(),// 通过 npm 安装的插件
    new HtmlWebpackPlugin({template: ‘./src/index.html‘}) //内置插件
  ]};   
  module.exports = config;
 



以上是关于Webpack框架知识整理——Plugins的主要内容,如果未能解决你的问题,请参考以下文章

Webpack框架知识整理——Entry Points,Output

webpack知识1

webpack 知识点整理

Spring 中的接口知识整理

webpack3整理(第三节/满三节)

【webpack】插件 plugins