html 多个插件,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()打包也不内嵌，有大神可以帮忙看看这是为什么吗？

项目结构如图：