example: when a.js introduces a.css require b.jsreb. Js into b.css packaging, a.css actually contains b.css content. What"s going on? The following is my webpack.config.js configuration. I don"t know what"s wrong. Please give me some advice.
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const cleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var getHtmlConfig = function (filename,title) {
return {
template:"./src/" + filename + "/"+ filename + ".html",
filename: filename + ".html",
title:title,
hash:true,
chunks:[filename]
}
}
module.exports = {
entry: {
index:"./src/index/index.js",
test:"./src/test/test.js"
},
output: {
filename: "./js/[name].bundle.js",
path: path.resolve(__dirname,"dist"),
},
devServer:{
contentBase: "./dist"
},
plugins: [
new htmlWebpackPlugin(getHtmlConfig("index","index")),
new htmlWebpackPlugin(getHtmlConfig("test","test")),
new cleanWebpackPlugin(["dist"]),
new MiniCssExtractPlugin({
filename: "./css/[name].css",
chunkFilename: "[id].css"
})
],
module:{
rules:[
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true
}
},
]
},
{
test:/\.(png|svg|jpg|gif)$/,
use:[
"file-loader"
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use:[
"file-loader"
]
}
]
}