實現內聯插件——InlineSourcePlugin

實現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']
            }
        ]
    }
};