即使安裝了適當的加載程式，webpack 似乎也無法識別我的 CSS 檔案......
webpack.config.js :
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = env => {
let devType = env.production || false;
console.log(devType);
return {
mode: devType ? "production" : "development",
entry: "./src/js/app.js",
output: {
filename: "js/app.bundle.js",
path: path.resolve(__dirname, "docs"),
assetModuleFilename: "imgs/[name][ext]",
clean: true
},
devServer: {
static: {
directory: path.resolve(__dirname, "./docs")
},
port: 5001
},
module: {
rules: [{
test: /\.html/g,
use: ["html-loader"]
},
{
test: /\.(svg|ico|webp|png|jpg|jpeg|gif)$/,
type: "asset/resource"
},
{
test: /\.css/g,
use: [
devType ? MiniCssExtractPlugin.loader : "style-loader",
{
loader: "css-loader"
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: path.resolve(__dirname, "./src/index.html")
}),
new MiniCssExtractPlugin({
filename: "css/main.css"
})
]
};
};
包.json :
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:dev": "webpack --watch",
"build:prod": "webpack --watch --env production",
"start:dev": "webpack serve --open",
"start:prod": "webpack serve --open --env production"
},
"keywords": [],
"author": "bunee",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.5.1",
"html-loader": "^3.0.1",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.5",
"style-loader": "^3.3.1",
"webpack": "^5.64.2",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.5.0"
}
}
應用程式.js：
import "../css/normalize.css";
import "../css/app.css";
console.log("bunee");
錯誤：
我必須再提一件事，如果app.js 中只匯入一個 CSS 檔案，則一切正常。僅當我嘗試匯入多個 CSS 檔案時才會出現此問題。
如果我沒有說清楚，請隨時問我問題。
uj5u.com熱心網友回復：
我意識到我的錯誤，這是罪魁禍首。 
是的，我使用的正則運算式是問題所在（手掌）。我用它替換了它，/(\.css)$/一切正常。如果將來有人發現這有幫助，你最好感謝我。為了解決這個愚蠢的錯誤，我在頭皮上掉了太多頭發。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/373391.html
標籤：css 网络包 webpack-5 webpack-loader
上一篇：在Laravel8中編譯sass