重构Webpack系列之五 ---- Plugins

最新推荐文章于 2024-05-06 19:08:09 发布

vk阿木

最新推荐文章于 2024-05-06 19:08:09 发布

阅读量496

点赞数

分类专栏： webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/LizequaNNN/article/details/122246990

版权

webpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

重构Webpack系列之五 ---- Plugins

webpack重构系列之插件

很高兴你能读到我这篇文章，对于前端工程师来讲，webpack是一块硬骨头，个人认为，一个合格的前端工程师不应该不懂webpack。我写这系列的文章也是为了能把这块硬骨头啃下来，希望大家一起加油进步吧！
这个系列只是为大家介绍了webpack比较浅显的一些概念，后续会继续持续输出原理系列的文章，请大家保持关注~

一、概念

插件（plugins）是webpack的支柱功能。插件的目的在于解决loader无法实现的其他操作，除此之外，webpack还提供了很多开箱即用的插件。

plugins选项用于各种方式自定义webpack的构建过程，webpack附带了各种内置的插件，我们可以通过webpack.[plugin-name]来访问这些插件。

二、原理剖析

webpack插件是一个具有 apply方法的JavaScript对象。apply方法会被webpack compiler调用，并且在整个编译生命周期都可以访问compiler对象。例如：

备注：以下代码均在webpack.config.js进行。

ConsoleLogOnBuildWebpackPlugin.js

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
	compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('webpack 构建正在启动！')
    })
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

compiler是webpack在执行程序过程中的一个对象，代表着webpack本身。hook是compiler的钩子。tap是webpack用来定义插件的一个框架，叫做Tapable，大家可以自行上网查阅，这里不做展开了。

compiler hook的tap方法的第一个参数，应该是驼峰式命名的插件名称。建议为此使用一个常量，以便它可以在所有hook中重复使用。

三、使用方式

由于插件可以携带params或是一个Object选项，所以你必须在webpack配置中，向plugin属性传入一个new实例。

不过一般使用方式都取决于你对webpack的用法，用法不同对应的使用插件的方式也各不相同。

配置文件方式

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  //...
  plugins: [
    new webpack.ProgressPlugin();
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

ProgressPlugin用于自定义编译过程中的进度报告，HtmlWebpackPlugin将生成一个HTML文件，并在其中使用script引入一个output选项打包出来的bundle.js。

Node API 方式

在使用Node API的时候，还可以通过配置plugins的属性传入需要使用到的插件：

const webpack = require('webpack');
const configuration = require('./webpack.config.js');

let compiler = webpack(configuration);

new webpack.ProgressPlugin().apply(compiler);

compiler.run(function (err,stats) {...});

四、插件实例

1.使用单个webpack插件

const webpack = require('webpack');

module.exports = {
  //...
  plugin: [
    new webpack.DefinePlugin({
     // Definitions...
    })
  ]
}

2.使用多个webpack插件

const webpack = require('webpack');
// 导入非webpack自带插件
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
  //...
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': 'production'
    }),
    new DashboardPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
}