第1206期看清楚真正的 Webpack 插件

Posted 2021-04-29 前端早读课

前言

上周六刚涉及一波Webpack 升级版本到4.0。今天早读文章由@zoumiaojiang分享。

正文从这开始～

什么是 webpack？ webpack 能干什么？ webpack 怎么用？ 太多的入门教程了，一搜一大把，不再说了，而且 webpack 的官方文档应该是文档届的标杆了，太详细了，由浅入深，从玩具类型的初级 Level，到深度优化的生产环境下产品级别的高级 Level 都讲的特别细致易懂，在这里就不细说了，丢一个 webpack 的文档链接吧，可以根据教程先把玩一番。

在上手把玩了 webpack 之后或者对 webpack 有一定了解之后，这里重点来看一下比较有意思的 webpack 插件，这有助于在项目中更灵活的运用 webpack 工具。了解插件机制后就不至于在遇到一堆堆的 webpack 配置的时候感到懵逼。

首先需要了解一件有意思的事情，webpack 插件机制是整个 webpack 工具的骨架，而 webpack 本身也是利用这套插件机制构建出来的。

感觉比较拗口，这个就得从 webpack 的 源码 看 webpack 的具体实现才能解释的清楚了，暂时可以理解为 webpack 的核心是一个编译器（Compiler），而这个编译器也是作为一个插件提供给 webpack 这个插件平台使用的。

webpack 插件

先简单明了的了解一下什么是 webpack 插件，如下面代码描述，some-webpack-plugin 就是一个简单的 webpack 插件了，这个插件专注处理 webpack 在编译过程中的某个特定的任务。

const webpack = require('webpack');
// 假设有这么一个 webpack plugin
const SomewebpackPlugin = require('some-webpack-plugin');
webpack({
// ...
    plugins: [
new SomewebpackPlugin({/* some plugin options */})