实现内联插件——InlineSourcePlugin

最新推荐文章于 2025-04-07 00:56:03 发布

rookieLink

最新推荐文章于 2025-04-07 00:56:03 发布

阅读量694

点赞数 1

分类专栏： webpack系列文章标签：内联插件 webpack webpack插件

本文链接：https://blog.youkuaiyun.com/zf2014122891/article/details/104566141

版权

webpack系列专栏收录该内容

37 篇文章

订阅专栏

本文档详细介绍了如何实现一个Webpack内联插件——InlineSourcePlugin，通过配置webpack.config.js和利用html-webpack-plugin@next，实现插件功能以优化资源内联。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现webpack插件

要安装 html-webpack-plugin@next

InlineSourcePlugin.js

// 把外链的标签， 变成内联的标签
let HtmlWebpackPlugin = require('html-webpack-plugin');
class InlineSourcePlugin {
    constructor({match}) {
        this.reg = match;
    }
    processTag(tag, compilation) {
        let newTag, url;
        if (tag.tagName === 'link' && this.reg.test(tag.attributes.href)) {
            newTag = {
                tagName: 'style',
                attributes: {type: 'text/css'}
            };
            url = tag.attributes.href;
        }
        if (tag.tagName === 'script' && this.reg.test(tag.attributes.src)) {
            newTag = {
                tagName: 'script',
                attributes: {type: 'application/javascript'}
            };
            url = tag.attributes.src;
        }
        if (url) {
            newTag.innerHTML = compilation.assets[url].source();    // 文件的内容被放到innerHtml中
            delete compilation.assets[url];
            return newTag;
        }
        return tag;
    }
    processTags(data, compilation) {
        let headTags = [];
        let bodyTags = [];
        data.headTags.forEach(headTag => {
            headTags.push(this.processTag(headTag, compilation));
        });
        data.bodyTags.forEach(bodyTag => {
            headTags.push(this.processTag(bodyTag, compilation));
        });
        return {...data, headTags, bodyTags};
    }
    apply(compiler) {
        // 要通过webpackPlugin来实现实现这个功能
        compiler.hooks.compilation.tap('InlineSourcePlugin', (compilation) => {
            HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync('alterPlugin', (data, cb) => {
                data = this.processTags(data, compilation);
                cb(null, data);
            })
        })
    }
}

module.exports = InlineSourcePlugin;

webpack.config.js

let webpack = require('webpack');
let path = require('path');
let DonePlugin = require('./plugins/DonePlugin');
let AsyncPlugin = require('./plugins/AsyncPlugin');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let FileListPlugin = require('./plugins/FileListPlugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let InlineSourcePlugin = require('./plugins/InlineSourcePlugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'development',
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'main.css'
        }),
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
        new FileListPlugin({
            filename: 'list.md',
        }),
        new InlineSourcePlugin({
            match: /\.(js|css)$/,
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    }
};