Блог

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 =gt; {  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"  } }  

app.js:

 import "../css/normalize.css"; import "../css/app.css";  console.log("bunee");  

Ошибка:

Я должен упомянуть еще одну вещь, все работает совершенно нормально, если только один файл CSS импортирован в app.js. Проблема возникает только тогда, когда я пытаюсь импортировать несколько CSS-файлов.

Если я недостаточно ясно выразился, пожалуйста, не стесняйтесь задавать мне вопросы.

Я понял свою ошибку, Вот виновник.

Да, регулярное выражение, которое я использовал, было проблемой (ладони лица). Я заменил его, /(.css)$/ и все работало нормально. Если кто-то в будущем сочтет это полезным, вам лучше поблагодарить меня. Я потерял слишком много волос на голове, пытаясь решить эту глупую ошибку.