Webpack框架知识整理——Plugins

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/volinVan/p/VV_ToWebpack_Plugins.html

文章标签：

#webpack #ViewUI

本文介绍了Webpack中的插件机制，解释了如何使用具有apply属性的JavaScript对象来创建自定义插件，并展示了如何在配置文件中引入第三方插件。

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;

转载于:https://www.cnblogs.com/volinVan/p/VV_ToWebpack_Plugins.html