Webpack框架知识整理——Plugins

Posted 2020-10-19 volinvan

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;