const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MinniCssexarctPlugin = require('mini-css-extract-plugin')
module.exports = {
//入口
entry: {
index: './src/js/index.js',
login: './src/js/login.js',
},
//输出
output: {
//文件名
filename: '[name].js',
//路径:绝对路径
path: path.resolve(__dirname, './dist'),
// 每次打包先清楚dist文件夹
clean: true,
},
//资源管理 加载器
module: {
//资源的匹配的规则
rules: [
{
test: '/\.css$/',
use: [
MinniCssexarctPlugin.loader,
"css-loader",
],
generator: {
filename: 'css',
}
}
]
},
plugins: [
new MinniCssexarctPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body',
filename: 'html/index.html',
chunks: ["index"]
}),
new HtmlWebpackPlugin({
template: './src/login.html',
inject: 'body',
filename: 'html/login.html',
chunks: ["login"]
}),
],
//模式:开发模式,生产模式
mode: "development",
}
错误提示信息说没有找到适当的 loader 来处理 CSS 文件。请检查你的 webpack 配置是否已安装并配置了 CSS 相关的加载器,比如 css-loader 和 mini-css-extract-plugin。
在你的 webpack 配置中,你需要安装并配置这两个加载器:
npm install css-loader mini-css-extract-plugin --save-dev
然后在 webpack 配置文件中的 rules 中添加对 CSS 的支持:
{
test: /\.css$/,
use: [
MinniCssexarctPlugin.loader,
"css-loader"
],
generator: {
filename: 'css',
}
}
该错误说明在 webpack 配置中没有为处理 ".css" 文件配置加载器。
在 module.rules 数组中,添加一个规则来处理 ".css" 文件:
module.exports = {
// ...
module: {
rules: [
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
}
// ...
}