webpack5 自定义plugin和loader

林兮
1,927 阅读7分钟

前言

本文主要介绍如何自定义 webpack5的 loader 和 plugin 的过程；

环境

node: v14.17.1
"webpack": "^5.75.0",
"webpack-cli": "^4.10.0"

准备

mkdir loader-source
cd loader-source
npm init -y
npm i webpack webpack-cli html-webpack-plugin -D

image.png

打包命令：npx webpack

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name].js',
        clean: true,
    },
    module: {
        rules: []
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html')
        })
    ],
    mode: 'development'
}

自定义loader

loader介绍

因为 webpack 只能处理 js,json 类型的数据; loader帮助 webpack 将不同类型的文件转换为 webpack 可以识别的模块;

loader执行顺序

loader的默认执行顺序：从下到上，从右到左，(除非你定义了loader执行的优先顺序：enforce)
没有定义enforce就是normal. enforce改变loader的执行顺序：pre > normal > inline > post
pre: 前置 loader, normal:普通loader,inline:内联loader,post：后置loader,

    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "loader1"
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "loader2"
            },
            {
                enforce: "post",
                test: /\.js$/,
                loader: "loader3"
            },
        ]
    }

inline loader:
使用 style-loader和css-loader,处理 ./styles.css资源

    import Styles from "style-loader!css-loader?modules!./styles.css";
    // 多个loader使用 ! 连接隔开
    // css-loader?modules, 就是给 css-loader 传递 modules 参数

inline loader可以通过添加不同的前缀，跳过其他类型 loader

  • ! 跳过 normal loader 
        import Styles from "!style-loader!css-loader?modules!./styles.css";
  • -! 跳过 pre 和 normal loader 
        import Styles from "-!style-loader!css-loader?modules!./styles.css";
  • !! 跳过 pre, normal 和 post loader 
        import Styles from "!!style-loader!css-loader?modules!./styles.css";

简单的自定义loader,了解下自定义loader的配置过程

  • 工程根目录下创建 loaders文件夹 下 test-loader.js; 
    // 自定义loader
// 接收内容，返回
/**
 * @param content 文件内容
 * @param map SourceMap 相关的
 * @param meta 别的loader传递的数据。
 */
module.exports = function (content, map, meta) {
    console.log(content)
    return content
}
    image.png
  • 在 webpack.config.js 配置使用 自定义loader;
    image.png

loader 就是一个函数，当 webpack 解析资源时，会调用相应的loader去处理，loader 就会接收到文件内容作为参数，返回内容出去。当然我们可以对接收的内容进行修改。

loader分类：

同步 loader；异步 loader；raw loader；pitch loader

同步 loader

  • 同步loader 写法一： 
        module.exports = function(content) {
       return content
    }
  • 同步loader 写法二：

    如果存在 sourcemap 或者 其他loader的数据需要传递下去的，使用这种;

        module.exports = function (content, map, meta) {
      console.log('test1')
      // 第一个参数，error, 是否有错误，没错null, 有错就把错误传递出去，如果loader出错了。会把错误传递出去
      // 第二个参数：content,处理后的内容。
      // 第三个参数：map  source-map， 继续传递 source-map
      // 第四个参数： meta, 给其他别的loader传递的数据，可以继承传递出去
      this.callback(null, content, map, meta)
  }
    同步loader注意：同步loader中不能进行异步操作，会报错。下一个loader拿到的值是 undefined。 image.png image.png

异步 loader

异步loader, 一定会等待这个异步loader做完，才会执行下一个laoder。

// 异步loader
module.exports = function(content, map, meta) {
    const callback = this.async()
    console.log('test2',content)
    setTimeout(() => {
        console.log('test2')
        callback(null, content, map, meta)
    }, 1000)
}

image.png

raw loader

raw loader 接收到的 content 是 buffer (二进制数据); 当我们处理图片，字体图标的时候会使用定义这种loader;

  • raw loader 写法一： 
      // raw loader
  // raw loader接收到的 content 是 buffer数据（二进制数据）
  module.exports = function (content) {
      console.log('raw loader接收到的数据:', content) // 接收的数据是 buffer数据
      return content
  }
  module.exports.raw = true;
  • raw loader 写法二： 
      // 根据情况，用同步异步loader用法都行
  // 关键是 raw = true
  function test3Loader(content) {
     return content
  }
  test3Loader.raw = true
  module.exports = test3Loader
    image.png

pitch loader

pitch loader 要求在暴露的对象中添加 pitch方法，pitch方法是在执行loader之前执行

    // pitch loader
    module.exports = function(content) {
        console.log('test4 normal loader')
        return content
    }
    // 要求添加 pitch，会在 loader执行之前执行
    module.exports.pitch = function() {
        console.log('test4 pitch')
    }

pitch loader执行顺序 和 return
1. 先由 前往后执行 pitch 方法，再 由后往前执行 loader 方法。 image.png 2. 一旦在pitch中return了，后面的 pitch 和 loader 不再执行。 也叫 熔断机制。 image.png

loader API

方法名含义用法
this.async异步回调 loader,返回 this.callbackconst callback = this.async()
this.callback可以同步或者异步调用并返回多个结果的函数this.callback(err, content, sourceMap?, meta?)
this.getOptions(schema)获取 loader 的 optionsthis.getOptions(schema)
this.emitFile产生一个文件this.emitFile(name,content,sourceMap)
this.utils.contextify返回一个相对路径this.utils.contextify(context, request)
this.utils.absolutify返回一个绝对路径this.utils.absolutify(context, request)

自定义 clean-log-loader

作用：用来清理 js 代码中的 console.log

未清除 console.log 会被编译打包进去. image.png

// clean-log-loader
module.exports = function(content) {
    // 清除 内容中的console.log语句 "console.log(xxx)"
    return content.replace(/console\.log\(.*\);?/g, '');
}

use clean-log-loader 后，console.log 被替换为 '' image.png

自定义 banner-loader

添加 作者 等信息;

    // webpack.config.js
    module: {
        rules: [
                        {
                test: /\.js$/,
                loader: './loaders/banner-loader',
                options: {
                    author: "老王",  // schema 设置了 type, 类型和设置不一致，也会报错。
                    // age: 18  // schema 设置了 additionalProperties为false,就不能新增额外属性，否则会报错
                }
            }
        ]
    }

    // banner-loader.js
    const schema = require('./schema.json')
    module.exports = function (content) {
        // schema 对 options 的验证规则
        // schema 符合 JSON Schema 的规则
        const options = this.getOptions(schema)
        const prefix = `
            /**
             * Author: ${options.author}
             */ 
        `
        return prefix + content;
    }

    // schema.json
    {
        "type": "object",
        "properties": {
            "author": {
                "type": "string"
            }
        },
        "additionalProperties": false 
    }

image.png

自定义 babel-loader

没有加 babel-loader 使用 ES6 语法无法编译成 ES5,在IE低版本上可能无法识别使用: image.png

    npm i @babel/core @babel/preset-env -D

    // schema.json
    {
        "type": "object",
        "properties": {
            "presets": {
                "type": "array"
            }
        },
        "additionalProperties": true
    }

    // babel-loader.js
    // [babel中文](https://www.babeljs.cn/docs/babel-core)
    const babel = require('@babel/core')
    const schema = require('./schema.json')

    module.exports = function (content) {
        // 异步loader
        const callback = this.async()
        const options = this.getOptions(schema)
        // 使用 babel 对代码进行编译转换
        babel.transform(content, options, function(err, result) {
            if (err) callback(err)
            else callback(null, result.code)
        })
    }

    // webpack.config.js
    {
        test: /\.js$/,
        loader: './loaders/babel-loader',
        options: {
           presets: ['@babel/preset-env'],
        }
    },

image.png

自定义plugin

plugin介绍

通过插件我们可以扩展 webpack,加入自定义的构建行为，以便 webpack 可以执行更广泛的任务，拥有更强的构建能力。插件 是 webpack 的 支柱 功能。Webpack 自身也是构建于你在 webpack 配置中用到的 相同的插件系统 之上！插件目的在于解决 loader 无法实现的其他事。

plugin工作原理

webpack就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。插件就像一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。webpack通过 Tapable 来组织这条复杂的生产线。webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。webpack的事件流机制保证了插件的有序性，使得整个系统扩展很好。 ----- [深入浅出 Webpack]

站在代码逻辑的角度就是：webpack在编译代码过程中，会触发一系列 Tapable 钩子时间，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。

webpack 内部的钩子

什么是钩子?

钩子的本质就是： 事件。为了方便我们直接接入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称作：hooks(钩子)。开发插件，离不开这些钩子。

Tapable

Tapable 为了 webpack 提供了统一的插件接口(钩子)类型定义，它是webpack的核心功能库。webpack中目前有十种 hooks, 在 Tapable 源码中 webpack hook 可以看到，他们是： image.png

Tapable 还统一暴露了三个方法给插件，用于注入不同类型的自定义构建行为：

  • tap: 可以注册同步钩子和异步钩子。
  • tapAsync: 回调方式注册异步钩子。
  • tapPromise: Promise 方式注册异步钩子。

plugin 构建对象

Compiler

Compiler 对象中保存着完整的 webpack 环境配置，每次启动 webpack 构建时它都是一个独一无二，仅仅会创建一次对象。
这个对象会在首次启动 webpack 时创建，我们可以通过 compiler 对象上访问到访问到 webpack 的主环境配置，比如 loader、plugin 等等配置信息。
它有以下主要属性：

  • compiler.options 可以访问本次启动 webpack 时候所有的配置文件，包括但不限于loaders、entry、output、plugin等等完整配置信息。
  • compiler.inputFileSystem 和 compiler.outputFileSystem 可以进行文件操作，相当于 NodeJs 中的 fs。
  • compiler.hooks 可以注册 tapable 的不同种类 Hook, 从而可以在 compiler 生命周期中植入不同的逻辑。

compiler hook 文档

创建插件的时候，往这里注册，钩子顺序，大概是从上到下的。 image.png

Compilation

compilation 对象代表一次资源的构建，compilation 实例能够访问所有的模块和它们的依赖。
一个compilation 对象会对构建依赖图中所有的模块，进行编译。在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、分块(chunk)、哈希(hash) 和 重新创建(restore)。
它有以下主要属性:

  • compilation.modules 可以访问所有模块，打包的每一个文件都是一个模块。
  • compilation.chunks chunk即多个 modules 组成而来的一个代码块。入口文件引入的资源组成一个chunk,通过代码分割的模块又是另外的chunk。
  • compilation.assets 可以访问本次打包生成所有文件的结果。
  • compilation.hooks 可以注册 tapable 的不同种类 hook,用于 compilation编译模块阶段进行逻辑添加以及修改。

compilation hooks 文档

生命周期简图

image.png

自定义插件基本写法

    /**
     * 1. webpack 加载 webpack.config.js 中所有的配置，此时会 new TestPlugin()，执行插件的 constructor.
     * 2. webpack创建compiler对象。
     * 3. 遍历所有 plugins 中插件， 调用插件的 apply方法。
     * 4. 执行剩下编译流程(触发各个hooks事件。)
     */

    class TestPlugin {
        constructor() {
            console.log('TestPlugin constructor')
        }
        apply(compiler) {
            console.log('TestPlugin apply')
        } 
    }
    module.exports = TestPlugin

插件的用法是: 先引入再使用 image.png

如何注册 hooks

/**
 * 1. webpack 加载 webpack.config.js 中所有的配置，此时会 new TestPlugin()，执行插件的 constructor.
 * 2. webpack创建compiler对象。
 * 3. 遍历所有 plugins 中插件， 调用插件的 apply方法。
 * 4. 执行剩下编译流程(触发各个hooks事件。)
 */
class TestPlugin {
    constructor() {
        console.log('TestPlugin constructor')
    }
    apply(compiler) {
        console.log('TestPlugin apply')
        // 由文档可知，environment是同步钩子，所以需要使用tap注册
        compiler.hooks.environment.tap('TestPlugin', () => {
            console.log('TestPlugin environment')
        })
        // 由文档可知，emit是异步串行钩子
        compiler.hooks.emit.tap('TestPlugin', (compilation) => {
            console.log('TestPlugin emit 111')
        })

        compiler.hooks.emit.tapAsync('TestPlugin', (compilation, callback) => {
            setTimeout(() => {
                console.log('TestPlugin emit 222')
                callback()
            }, 2000)
        })
        
        compiler.hooks.emit.tapPromise('TestPlugin', (compilation) => {
            return new Promise((resolve) => {
                setTimeout(() => {
                    console.log('TestPlugin emit 333')
                    resolve()
                }, 5000)
            })
        })

        // 由文档可知，make是异步并行钩子，AsyncParallelHook
        compiler.hooks.make.tapAsync("TestPlugin", (compilation, callback) => {
            // 在 compilation 上挂载钩子
            // 需要在 compilation hooks 触发前注册才能使用
            compilation.hooks.seal.tap('TestPlugin', () => {
                console.log('TestPlugin seal')
            })
            setTimeout(() => {
                console.log('TestPlugin make 111')
                callback()
            }, 3000)
        })
        compiler.hooks.make.tapAsync("TestPlugin", (compilation, callback) => {
            setTimeout(() => {
                console.log('TestPlugin make 222')
                callback()
            }, 1000)
        })
        compiler.hooks.make.tapAsync("TestPlugin", (compilation, callback) => {
            setTimeout(() => {
                console.log('TestPlugin make 333')
                callback()
            }, 2000)
        })

    } 
}
module.exports = TestPlugin

image.png

通过node查看compiler和compilation对象

通过console.log打印compiler和compilation对象在控制台很多内容看不清楚； image.png

通过node查看 compiler 和 compilation 对象

  1. 在代码处 打 debugger; image.png
  2. 配置 package.json 文件; node --inspect-brk 表示执行第一行代码就会停下; node --inspect-brk ./node_modules/webpack-cli/bin/cli.js 
    "scripts": {
  "debug": "node --inspect-brk ./node_modules/webpack-cli/bin/cli.js"
},
    image.png
  3. 执行 npm run debug; 注意：debug 和 上面scripts中的 debug 对应； image.png
  4. 打开页面 和 页面控制台；
    在浏览器打开如下图所示的地址<br/> (例如：ws://127.0.0.1:9229/323fb448-e361-4047-982d-cf967936fa37) 或者打开任意页面刷新下都行，并打开 控制台；不行就多刷新几次，会控制台上有个node的logo, image.png image.png 点击 nodejs 的logo。会出行一个断点调试面板； image.png
  5. 查看执行 并 查看控制台面板中变量值; F8 或者 点击下一步，会进入我们 在代码中 debugger 的位置； image.png image.png

自定义BannerWebpackPlugin

作用： 给打包输出文件添加注释。

开发思路：

  • 需要打包输出前添加注释：需要使用 compiler.hooks.emit 钩子，它是打包输出前触发。
  • 如何获取打包输出的资源? compilation.assets 可以获取所有即将输出的资源文件。
    // banner-webpack-plugin.js
    
    class BannerWebpackPlugin {
        // 插件传递的选项，可以在 构造函数中接收下
        constructor(options = {}) {
            this.options = options
        }
        apply(compiler) {
            // 在资源输出之前触发
            compiler.hooks.emit.tap('BannerWebpackPlugin', (compilation) => {
                const extensions = ['css', 'js']
                // 1. 获取即将输出的资源文件：compilation.assets
                // 2. 过滤只保留 js 和 css 资源
                const assets = Object.keys(compilation.assets).filter(assetsPath => {
                    // 将文件名切割， ['xxx', 'js] ['xxxxx', 'css]
                    const splitted =  assetsPath.split('.')
                    // 获取最后一个文件扩展名
                    const extension = splitted[splitted.length - 1]
                    // 判断是否包含
                    return extensions.includes(extension)
                })
                const prefix = `/*
    * Author: ${this.options.author}
    */`;
                // 2. 遍历剩下资源添加上注释
                assets.forEach(asset => {
                    // 获取原理内容
                    const source = compilation.assets[asset].source()
                    // 拼接上注释    
                    const content = prefix + source

                    // 修改资源
                    compilation.assets[asset] = {
                        // 最终资源输出时，会调用 source 方法，source方法的返回值就是 资源的具体内容
                        source() {
                            return content
                        },
                        // 资源大小
                        size() {
                            return content.length
                        }
                    }
                })
            });
        }
    }

    module.exports = BannerWebpackPlugin

    // webpack.config.js
    
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    const BannerWebpackPlugin = require('./plugins/banner-webpack-plugin.js')

    module.exports = {
        entry: './src/main.js',
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: 'js/[name].js',
            clean: true,
        },
        module: {
            rules: []
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, 'public/index.html')
            }),
            // 给插件传递选项，插件会在 constructor中接收到
            new BannerWebpackPlugin({
                author: "老王"
            })
        ],
        mode: 'production'
    }

运行 npx webpack后，查看 dist/js/main.js 中的内容。

image.png

自定义 CleanWebpackPlugin

作用：在webpack打包输出前将上次打包内容清空。webpack5内置了该功能，clean: true 就可以了。

开发思路

  • 如何在打包输出前执行? 需要使用 compiler.hooks.emit 钩子，它是打包输出前触发。
  • 如何清空上次打包内容?
    • 获取打包输出目录： 通过 compiler 对象。
    • 通过文件操作清空内容：通过 compiler.outputFileSystem 操作文件。
    // clean-webpack-plugin
    class CleanWebpackPlugin {
        apply(compiler) {
            // 2. 获取打包输出的目录
            const outputPath = compiler.options.output.path

            const fs = compiler.outputFileSystem

            // 1. 注册钩子：在打包输出之前 emit
            compiler.hooks.emit.tap('CleanWebpackPlugin', compilation => {
                // 3. 通过fs删除打包输出的目录下的所有文件
                this.removeFiles(fs, outputPath)
            })
        }
        removeFiles(fs, filepath) {
            // 想要删除打包输出目录下所有资源，需要贤将目录下资源删除，才能删除这个目录
            // 1. 读取当前目录下所有资源
            const files = fs.readdirSync(filepath)
            // 2. 遍历一个个删除
            // 2.1 遍历所有文件，判断是文件夹还是文件，
            files.forEach(file => {
                const path = `${filepath}/${file}`
                const fileStat = fs.statSync(path)
                // console.log(path)
                if (fileStat.isDirectory()) {
                    // 2.2 是文件夹，就得删除下面所有文件，才能删除文件夹
                    this.removeFiles(fs, path)
                } else {
                     // 2.3 是文件，直接删除
                    fs.unlinkSync(path)
                }
            });
        }
    }
    module.exports = CleanWebpackPlugin

    // webpack-config.js
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    const BannerWebpackPlugin = require('./plugins/banner-webpack-plugin.js')
    const CleanWebpackPlugin = require('./plugins/clean-webpack-plugin')

    module.exports = {
        entry: './src/main.js',
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: 'js/[name].js',
            // webpack5通过这个配置实现了这个功能，
            // clean: true, // 这边注释下，模拟 自定义 CleanWebpackPlugin插件 实现 clean: true功能
        },
        module: {
            rules: []
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, 'public/index.html')
            }),
            // new TestPlugin(),
            new BannerWebpackPlugin({
                author: "老王"
            }),
            new CleanWebpackPlugin()
        ],
        mode: 'production'
    }

自定义AnalyzeWebpackPlugin

作用：分析 webpack 打包资源大小，并输出分析文件。

开发思路：

  • 在哪做? compiler.hooks.emit,它是在打包输出前触发，我们需要分析资源大小同时添加上分析后的 md 文件
    // analyze-webpack-plugin
    class AnalyzeWebpackPlugin {
        apply(compiler) {
            // emit 是异步串行钩子
            compiler.hooks.emit.tap('AnalyzeWebpackPlugin', compilation => {
                // Object.entries 将对象变成二维数组。二维数组中第一项值是key, 第二项是value
                // 二维数组： [[key, value], [key, value]]
                const assets = Object.entries(compilation.assets)
                // md 表格语法：
                /*
                    | 资源名 | 资源大小 |
                    | --- | ---|
                    |xxx.js | 22 |
                */
                let source = `# 分析打包资源大小 \n| 名称 | 大小 | \n | --- | --- |`;
                // 1. 遍历所有即将输出的文件，得到其大小
                assets.forEach(([filename, file]) => {
                    source += `\n| ${filename} | ${file.size()} |`
                    // 带单位 多少kb
                    // source += `\n| ${filename} | ${Math.ceil(file.size() / 1024)}kb |`
                })
                // 2. 生成一个 md 文件
                // 添加资源
                compilation.assets["analyze.md"] = {
                    source() {
                        return source
                    },
                    size() {
                        return source.length
                    }
                }
            })
        }
    }
    module.exports = AnalyzeWebpackPlugin

    // webpack-config.js
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    const BannerWebpackPlugin = require('./plugins/banner-webpack-plugin.js')
    const CleanWebpackPlugin = require('./plugins/clean-webpack-plugin')

    module.exports = {
        entry: './src/main.js',
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: 'js/[name].js',
            // webpack5通过这个配置实现了这个功能，
            // clean: true, // 这边注释下，模拟 自定义 CleanWebpackPlugin插件 实现 clean: true功能
        },
        module: {
            rules: []
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, 'public/index.html')
            }),
            // new TestPlugin(),
            new BannerWebpackPlugin({
                author: "老王"
            }),
            new CleanWebpackPlugin(),
            new AnalyzeWebpackPlugin(),
        ],
        mode: 'production'
    }

HtmlWebpackPlugin工作原理

工作原理：
html-webpack-plugin image.png

InlineChunkWebpackPlugin

作用：webpack打包生成的runtime文件太小了，额外发送请求性能不好，所有需要将其内联到js中，从而减少请求数量。

开发思路：

  • 我们需要借助 html-webpack-plugin 来实现

    • 在html-webpack-plugin输出index.html前将内联runtime注入进去
    • 在删除多余的 runtime 文件。

  • 如何操作 html-webpack-plugin

    npm i safe-require -D

    // inline-chunk-webpack-plugin.js
    // plugins/inline-chunk-webpack-plugin.js
    const HtmlWebpackPlugin = require('safe-require')('html-webpack-plugin')
    class InlineChunkWebpackPlugin {
        constructor(tests) {
            this.tests = tests
        }
        apply(compiler) {
            compiler.hooks.compilation.tap("InlineChunkWebpackPlugin", compilation => {
                // 1. 获取 html-webpack-plugin的 hooks
                const hooks = HtmlWebpackPlugin.getHooks(compilation)
                // 2. 注册 html-webpack-plugin 的 hooks --> alterAssetTagGroups

                hooks.alterAssetTagGroups.tap('InlineChunkWebpackPlugin', assets => {
                    // 3. 从里面将 script 的runtime 文件，变成 inline script
                    assets.headTags = this.getInlineChunk(assets.headTags, compilation.assets)
                    assets.bodyTags = this.getInlineChunk(assets.bodyTags, compilation.assets)
                })
                // 删除 runtime文件
                hooks.afterEmit.tap('InlineChunkHtmlPlugin', () => {
                    Object.keys(compilation.assets).forEach(assetName => {
                        if (this.tests.some((test) => assetName.match(test))) {
                            delete compilation.assets[assetName]
                        }
                    })
                })
            })
        }
        getInlineChunk(tags,assets) {
            return tags.map(tag => {
                if (tag.tagName !== 'script') return tag
                // 获取文件资源路径
                const filepath = tag.attributes.src
                if(!filepath) return tag
                if (!this.tests.some((test) => test.test(filepath))) return tag

                return {
                    tagName: 'script',
                    innerHTML: assets[filepath].source(),
                    closeTag: true,
                }
            })
        }
    }
    module.exports = InlineChunkWebpackPlugin
    

    // webpack-config.js
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    const BannerWebpackPlugin = require('./plugins/banner-webpack-plugin.js')
    const CleanWebpackPlugin = require('./plugins/clean-webpack-plugin')
    const InlineChunkWebpackPlugin = require('./plugins/inline-chunk-webpack-plugin')
    
    module.exports = {
        entry: './src/main.js',
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: 'js/[name].js',
            // webpack5通过这个配置实现了这个功能，
            // clean: true, // 这边注释下，模拟 自定义 CleanWebpackPlugin插件 实现 clean: true功能
        },
        module: {
            rules: []
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, 'public/index.html')
            }),
            // new TestPlugin(),
            new BannerWebpackPlugin({
                author: "老王"
            }),
            new CleanWebpackPlugin(),
            new AnalyzeWebpackPlugin(),
            new InlineChunkWebpackPlugin([/runtime(.*)\.js$/g]),
        ],
        optimization: {
            splitChunks: {
                chunks: 'all',
            },
            runtimeChunk: {
                name: entrypoint => `runtime~${entrypoint.name}.js`
            }
        },
        mode: 'production'
    }

参考文档

webpack中文文档
babel中文
webpack/loader-utils loader处理工具函数
html-webpack-plugin

avatar
文章
阅读
粉丝
相关推荐
html-webpack-plugin详解【转载】
2.7k阅读
 · 
3点赞
Webpack5 配置手册
3.7k阅读
 · 
8点赞
webpack入门之图片、字体、文本、数据文件处理
1.5k阅读
 · 
15点赞
[探索]Webpack DevServer和HMR原理
3.5k阅读
 · 
17点赞
webpack5 如何开启css Modules
4.7k阅读
 · 
13点赞
使用Rollup打包JavaScript
11k阅读
 · 
41点赞
webpack 插件配置 —— HTML Webpack Plugin
8.0k阅读
 · 
9点赞
小白都能听懂的最新版Babel配置探索——保姆级教学
1.5k阅读
 · 
24点赞
webpack5 的使用（二）：多个环境配置
9.6k阅读
 · 
18点赞