Webpack style-loader与css-loader在简单示例中失效求助

我按照Webpack官方资源管理教程操作，但始终无法加载CSS文件（页面文本始终不显示红色），试过Slack上提供的所有解决方案均无效，恳请帮忙排查问题。

项目文件结构 #

dist/index.html
dist/main.js
dist/main.js.LICENSE.txt
package.json
src/index.js
src/style.css
webpack.config.js

配置文件及代码 #

webpack.config.js #

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

module.exports = {
    mode: 'development',
};

package.json #

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

src/index.js #

import _ from 'lodash';
import './style.css';

function component() {
    const element = document.createElement('div');
  
    // Lodash，已通过该脚本导入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
  
    return element;
}
  
document.body.appendChild(component());

src/style.css #

.hello {
    color: red;
}

dist/index.html #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>资源管理</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

构建报错日志 #

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\Program Files\nodejs\node.exe',
1 verbose cli   'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.14.13
3 info using node@v14.17.3
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle webpack-demo@1.0.0~prebuild: webpack-demo@1.0.0
6 info lifecycle webpack-demo@1.0.0~build: webpack-demo@1.0.0
7 verbose lifecycle webpack-demo@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle webpack-demo@1.0.0~build: PATH: C:\Users\User\AppData\Roaming\nvm\v14.17.3\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\User\Desktop\Interview Ninja\elasticsearch\webpack-demo\node_modules\.bin;C:\Program Files\Eclipse Adoptium\jdk-8.0.352.8-hotspot\bin;C:\Python311\Scripts\;C:\Python311\;C:\Program Files\Java\jdk-19;C:\Program Files\Common Files\Oracle\Java\javapath;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\ProgramData\chocolatey\bin;C:\Program Files\Docker\Docker\resources\bin;%NVM_HOME%;%NVM_SYMLINK%;C:\Program Files\Java\jdk-19\bin;C:\Users\User\AppData\Local\Microsoft\WindowsApps;C:\Users\User\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2022.3\bin;;C:\Users\User\AppData\Roaming\npm;C:\Users\User\AppData\Roaming\nvm;C:\Program Files\nodejs
9 verbose lifecycle webpack-demo@1.0.0~build: CWD: C:\Users\User\Desktop\Interview Ninja\elasticsearch\webpack-demo
10 silly lifecycle webpack-demo@1.0.0~build: Args: [ '/d /s /c', 'webpack' ]
11 silly lifecycle webpack-demo@1.0.0~build: Returned: code: 1  signal: null
12 info lifecycle webpack-demo@1.0.0~build: Failed to exec build script
13 verbose stack Error: webpack-demo@1.0.0 build: `webpack`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\User\AppData\Roaming\nvm\v14.17.3\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:375:28)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\User\AppData\Roaming\nvm\v14.17.3\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:375:28)
13 verbose stack     at maybeClose (internal/child_process.js:1055:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid webpack-demo@1.0.0
15 verbose cwd C:\Users\User\Desktop\Interview Ninja\elasticsearch\webpack-demo
16 verbose Windows_NT 10.0.19045
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
18 verbose node v14.17.3
19 verbose npm  v6.14.13
20 error code ELIFECYCLE
21 error errno 1
22 error webpack-demo@1.0.0 build: `webpack`
22 error Exit status 1
23 error Failed at the webpack-demo@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

问题根因及解决方案 #

核心问题 #

你的webpack.config.js中两次赋值给module.exports，后面的{ mode: 'development' }完全覆盖了前面包含入口、出口、CSS loader规则的配置对象。这导致Webpack无法识别CSS处理规则，也找不到正确的入口文件，最终构建失败，CSS自然无法加载。

修复方案 #

将所有配置合并到同一个module.exports对象中：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

后续步骤 #

1. 执行npm run build重新构建项目
2. 打开dist/index.html查看效果，此时文本应显示红色

内容的提问来源于stack exchange，提问作者Pankaj Kumar