当我使用模板文件时，我希望输出文件同时注入了js文件和css文件。
当我使用模板文件时，我发现输出文件已注入js文件，但css文件丢失了...并且当不使用模板时，输出文件是正确的，都具有js文件和css文件...
OS：mac osx 10.15.4Node.js v12.16.2达尔文19.4.0npm 6.14.4webpack 4.43.0html-webpack-plugin：4.3.0
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const FriendlyWebpackPlugin = require("friendly-errors-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development",
devtool: "cheap-source-map",
entry: './src/index.js',
output: {
filename: "index.[hash:8].js",
path: path.join(__dirname, "../dist"),
},
devServer: {
contentBase: path.join(__dirname, '../dist'),
hot: true,
compress: true,
port: 8080,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: "babel-loader",
},
{
test: /\.html$/i,
loader: "html-loader",
},
// {
// test: /\.css$/i,
// use: ["style-loader", "css-loader"],
// },
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
// publicPath: '../',
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader',
],
},
{
test: /\.less$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
strictMath: true,
},
},
},
],
},
{
test: /\.(woff2?|eot|ttf|otf|svg|png)(\?.*)?$/,
loader: "url-loader",
options: {
limit: 10000,
// name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
},
},
],
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DefinePlugin({
'ENV': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({
filename: 'index.[hash:8].css',
chunkFilename: '[id].css'
}),
new HtmlWebpackPlugin({
title: 'admin',
template: path.join(__dirname, "../src/index.html"),
// chunks: ['index'],
inject: true,
// minify: {
// html5: true,
// collapseWhitespace: true,
// preserveLineBreaks: false,
// minifyCSS: true,
// minifyJS: true,
// removeComments: false,
// },
}),
new FriendlyWebpackPlugin(),
],
resolve: {
extensions: [".js", ".jsx"],
},
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <link rel="stylesheet" type="text/css" href="index.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="../src/iconfont/iconfont.css"/> -->
<!-- <link rel="stylesheet" type="text/css" href="../src/css/video-react.css"/> -->
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_389542_wle9cc2fi7wrk9.css" /> -->
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
</head>
<body>
<div id="root"></div>
<!-- <script src="./index.js"></script> -->
<!--<script src="../src/iconfont/JsonExportExcel.min.js"></script>-->
</body>
</html>
https://github.com/shauvet/code-reproduce/tree/webpack4-test
在此添加有关该问题的任何其他上下文。步骤1：纱线步骤2：开始纱线
这应该工作。.https://webpack.js.org/loaders/css-loader/首先尝试导入css