webpack Plugin Loader

本文作者为 360 奇舞团前端开发工程师

webpack是Javascript工具链的关键部分。webpack是个用于现代JavaScript应用程序的静态模块打包工具。它不仅可以支持ESM和CommonJS模块化编程，而且还可以支持或扩展支持许多不同的静态资源，例如：Files,Images, Fonts, JS, CSS, HTML等。

Plugin

概念

插件 是webpack的支柱功能，它是一个具有apply方法的JavaScript对象。apply方法会被webpack compiler调用，并且插件在其整个生命周期都可以访问到compiler对象，因此他可以hook整个编译的生命周期。

class MyCustomPlugin  {apply(compiler) {compiler.hooks.run.tap('MyCustomPluginName',(compilation)=>{console.log('webpack 构建正在启动');})}
}
module.exports = MyCustomPlugin;

webpack可以利用plugin来扩展其功能，常用的插件有：

1. HtmlWebpackPlugin：根据模板生成HTML文件，并自动添加CSS和JS的引用。

2. MiniCssExtractPlugin：将CSS提取为单独的文件，并在HTML中引用它。

3. UglifyJsPlugin：压缩JS代码，减小文件大小，提高加载速度。

4. CleanWebpackPlugin：清空指定目录中的旧文件，防止文件冗余。

5. CopyWebpackPlugin：复制指定目录中的文件到输出目录中。

6. DefinePlugin：定义全局常量，方便在JS中使用。

7. ProvidePlugin：自动加载模块，无需在JS文件中导入。

8. HotModuleReplacementPlugin：开启模块热替换功能，支持修改代码后自动刷新页面。

9. IgnorePlugin：忽略指定模块，减小文件大小，提高打包速度。

10. BundleAnalyzerPlugin：生成打包报告，分析项目中各个模块的大小和依赖关系。

使用

以下是一个基于HtmlWebpackPlugin的示例工程，主要展示插件的基本使用，帮助理解插件的扩展能力：

image.png

最终执行编译后只会输出dist/main.js没有.html文件；此时我们可以引入插件HtmlWebpackPlugin，来生成.html代码并且自动引入编译后的js bundle，它的安装如下：

npm install --save-dev html-webpack-plugin

配置与最终结果如下图：

image.png

Loader

概念

loader用于对模块的源代码转换，它相当于编译期间的一个任务。起初webpack只理解javaScript文件，但是webpack将每个作为模块导入的文件视为依赖项，并将其添加到依赖关系图中。因此为了处理静态资源的导入，例如：Files,Images, Fonts, CSS, Json等，webpack使用Loader来将这些文件加载到bundle中。常用的loader:

1. babel-loader：将ES6及以上版本的JavaScript代码转换成ES5及以下的版本，以保证兼容性。

2. css-loader：处理CSS文件中的url()等引用外部文件的语法，并将CSS代码转换为Webpack可以处理的模块。

3. file-loader：将文件复制到输出目录，并返回文件的URL地址。

4. url-loader：类似于file-loader，但是可以将文件转换为Base64编码的Data URL，减少HTTP请求。

5. style-loader：将CSS代码以<style>标签的形式插入到HTML文件中。

6. sass-loader：处理Sass/Scss代码，并将其转换为CSS代码。

7. less-loader：处理Less代码，并将其转换为CSS代码。

8. json-loader：处理JSON格式的文件，并将其转换为JavaScript对象。

9. xml-loader：处理XML格式的文件，并将其转换为JavaScript对象。

10. raw-loader：将文件内容以字符串的形式导出。

使用

基于上述插件的示例工程，我们为其加入CSS代码，来展示如何使用Loader转换CSS。

image.png

一切准备就绪，执行打包脚本，发现报错：You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file。

为了能够导入CSS，我们需要安装style-loader和css-loader，并在module.rules下配置这些loader:

npm install --save-dev style-loader css-loader

具体配置如下图：

image.png

重新打包后，浏览器运行index.html，会发现css样式生效了。

不过需要注意的是 导入css文件，应保证 loader 的先后顺序：style-loader 在前，而 css-loader 在后。否则webpack可能会抛出错误。这是因为loader 可以链式调用， 链中的每个 loader 都将对资源进行依次转换和传递。只需保证webpack链中的最后一个loader返回javaScript即可。

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。