plugins: [
new HtmlWebpackPlugin({
inlineSource: ".(js|css)$" // embed all javascript and css inline
}),
new HtmlWebpackInlineSourcePlugin()
]
HtmlWebpackInlineSourcePlugin plug-in, if there are multiple pages, multiple new HtmlWebpackPlugin () methods will be written. Do you need to write multiple new HtmlWebpackInlineSourcePlugin () methods at the same time?
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") // htmlnormalize.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: {} // requirecdn
};
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;
the above was written by new HtmlWebpackInlineSourcePlugin () only once, but the packaged code is not embedded. Every time I press HtmlWebpackPlugin, the new HtmlWebpackInlineSourcePlugin () package is not embedded either. Is there a great god who can help me to see why?
Project structure is shown in figure
Source code refer to the god: https://github.com/flytam/web.