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

最新推荐文章于 2025-11-25 21:49:23 发布

最新推荐文章于 2025-11-25 21:49:23 发布 · 153 阅读

文章标签：

#webpack #ViewUI

Webpack 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了Webpack插件系统的原理及应用方式，包括如何创建自定义插件，并展示了实际配置中的示例。通过理解插件的工作机制，开发者可以更好地利用Webpack进行项目构建。

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

原文地址：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 --