[译]webpack官网文档 ：概念 -- 5.插件

原创翻译，转载请注明出处。 

原文地址：https://webpack.js.org/concepts/plugins/

 

插件是webpack的核心。Webpack本身就是在你的wepback配置文件里使用的同样的插件系统来构建的。

它还能实现加载器不能实现的其他任何事情。

 

解析

一个webpack插件，就是一个带有apply属性的javascript对象。apply属性被webpack编译器调用，整个编译生命周期都有这个权利。

 

ConsoleLogOnBuildWebpackPlugin.js

 

functionConsoleLogOnBuildWebpackPlugin(){
 
};
 
ConsoleLogOnBuildWebpackPlugin.prototype.apply =function(compiler){
  compiler.plugin('run',function(compiler, callback){
    console.log("The webpack build process is starting!!!");
 
    callback();
  });
};

 

 

用法

因为插件可以带参数或者选项，你必须在你的配置文件的plugins属性里生成一个新的实例。

根据你使用webpack的方式不同，使用插件也有不同的方法。

 

配置

webpack.config.js

 

const HtmlWebpackPlugin =require('html-webpack-plugin');//installed via npm
const webpack =require('webpack');//to access built-in plugins
const path =require('path');
 
const config ={
  entry:'./path/to/my/entry/file.js',
  output:{
    filename:'my-first-webpack.bundle.js',
    path: path.resolve(__dirname,'dist')
  },
  module:{
    rules:[
      {
        test:/\.(js|jsx)$/,
        loader:'babel-loader'
      }
    ]
  },
  plugins:[
    newwebpack.optimize.UglifyJsPlugin(),
    newHtmlWebpackPlugin({template:'./src/index.html'})
  ]
};
 
module.exports = config;

 

Node API

some-node-script.js

 

const webpack =require('webpack');//to access webpack runtime
  const configuration =require('./webpack.config.js');
 
  let compiler =webpack(configuration);
  compiler.apply(newwebpack.ProgressPlugin());
 
  compiler.run(function(err, stats){
    // ...
  });

 

-- End --