webpack HtmlWebpackInlineSourcePlugin插件如果是多页面是否需要写多个?

plugins: [
  new HtmlWebpackPlugin({
        inlineSource: '.(js|css)$' // embed all javascript and css inline
    }),
  new HtmlWebpackInlineSourcePlugin()
]  

HtmlWebpackInlineSourcePlugin插件,如果多页面,则会写多个new HtmlWebpackPlugin()方法,是否需要同时写多个new HtmlWebpackInlineSourcePlugin()方法?

const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清理dist文件夹
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html引擎
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
//const ExtractTextPlugin = require('extract-text-webpack-plugin'); //抽离css
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const final = buildEntriesAndHTML();
const base = {
    entry: final.entries,
    output: {
        filename: '[name]/[name].js',
        path: __dirname + '/dist' //必须是绝对路径
    },
    module: {
        rules: [
            {
                // 为了方便这个放在第一位
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader'
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader', // base64
                        options: {
                            limit: 8192
                        }
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true // 使用缓存
                        }
                    },
                    {
                        loader: path.resolve('./inject-loader.js') // 开发模式使用注入代码实现html热更新,注入normalize.css
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            interpolate: 'require'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new webpack.ProvidePlugin({
            //加载jq
            $: 'jquery'
        }),
        //new ExtractTextPlugin("[name].css"), // 样式抽离不支持热更新
        new MiniCssExtractPlugin({
            filename: '[name]/[name].css',
            chunkFilename: '[id].css'
        }),
        ...final.htmls
    ],
    resolve: {
        extensions: ['.js', '.json', '.jsx', '.css']
    },
    externals: {} // 用来配置require的返回。一般用于加载cdn
};

function buildEntriesAndHTML() {
    // 用来构建entery
    const result = glob.sync('src/**/*.js');
    const config = {
        hash: true,
        inject: true
    };
    const entries = {};
    const htmls = [];
    result.forEach(item => {
        const one = path.parse(item);
        const outputfile = one.dir.split('/').slice(-1)[0];
        entries[outputfile] = './' + item;
        htmls.push(
            new HtmlWebpackPlugin({
                ...config,
                template: './' + one.dir + '/index.html',
                filename: outputfile === 'index' ? './index.html' : './' + outputfile + '/index.html', // 输出html文件的路径
                chunks: [outputfile],
        inlineSource:  '.(js|css)$',
            }),
        );
    htmls.push(
    new HtmlWebpackInlineSourcePlugin()
    )
    });
    return {
        entries,
        htmls
    };
}
console.log(base)
module.exports = base;

以上 是我按最后只new了一次HtmlWebpackInlineSourcePlugin()写的但是打包的代码并没有内嵌,我按每次HtmlWebpackPlugin之后都new HtmlWebpackInlineSourcePlugin()打包也不内嵌,有大神可以帮忙看看这是为什么吗?
项目结构如图:

clipboard.png

源码参考该大神:https://github.com/flytam/web...

阅读 3.9k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进