这是我参与「第五届青训营」伴学笔记创作活动的第 15 天

构建 Webpack 知识体系（二）

理解 Loader

问题：Webpack 只认识 JS

为了处理非 JS 资源，设计出资源翻译模块 Loader，用于将资源翻译成标准 JS。

1.安装 Loader

npm add -D css-loader style-loader less-loader

2.添加 module 处理 CSS 文件

module.exports = {
    module: {
        rules: [{
            test: /.less$/i,
            use: [
                'style-loader', 
                'css-loader'，
                'less-loader'
            ],
        }],
    },
};

认识 Loader：链式调用

less-loader：实现 less => CSS 的转换

css-loader：将 CSS 包装成类似 module.exports = "${CSS}" 的内容，包装后的内容符合 JavaScript 的语法

style-loader：将 CSS 模块包进 require 语句，并在运行时调用 injectStyle 等函数将内容注入到页面的 style 标签

其他特性：

链式执行
支持异步执行
分 normal、pitch 两种模式

常见 Loader

JavaScript：

babel-loader
eslint-loader
ts-loader
buble-loader
vue-loader
angular2-template-loader

CSS:

css-loader
style-loader
less-loader
sass-loader
stylus-loader
postcss-loader

html:

html-loader
pug-loader
posthtml-loader

Assets:

file-loader
val-loader
url-loader
json5-loader

理解 Plugin

Plugin 是什么？为什么这么设计

很多知名工具，如：VS Code、Web Storm、Chrome、Firefox 等等，都设计了所谓 “插件” 架构，为什么？

如果不设计插件架构，那么：

新人需要了解整个流程细节，上手成本高
功能迭代成本高，牵一发动全身
功能僵化，作为开源项目而言缺乏成长性

插件架构的精髓： 对拓展开放，对修改封闭

甚至，Webpack 本身的很多功能也是基于插件实现的

使用 html-webpack-plugin

module.exports = {
    plugins: [
        new HTMLWebpackPlugin()
    ]
}

使用 html-webpack-plugin + DefinePlugin

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

module.exports = {
    entry: './src/index',
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "./dist"),
    },
    plugins: [
        new HtmlWebpackPlugin()
        new webpack.DefinePlugin({
            PRODUCTION：JSON。stringfy(true),
            VERSION：JSON.stringfy('5f3b9')
        })
    ],
};

插件编写

插件围绕钩子展开

钩子的核心信息：

时机：编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情
上下文：通过 tapable 提供的回调机制，以参数方式传递上下文信息
交互：在上下文参数对象中附带了很多存在 side effect 的交互接口，插件可以通过这些接口改变

小结

这两节课我们学习了：

Webpack 的作用
理解 Webpack 配置结构，学习关键配置向项
Loader 的作用与常用 Loader
Pluging 的基本形态与作用

参考

理解 Loader - 掘金 (juejin.cn)

构建 Webpack 知识体系（二）| 青训营笔记