即使我有自定义 webpack.config.js，webpack 也会继续使用默认配置答案

【问题标题】：webpack keeps using default config even when i have a custom webpack.config.js即使我有自定义 webpack.config.js，webpack 也会继续使用默认配置
【发布时间】：2020-08-26 04:17:06
【问题描述】：

我开始学习 webpack。我知道 webpack4 不需要明确的配置。我为我的项目创建了一个。在每个构建中，我都看到它采用默认配置。下面是我的 package.json

   {
 "name": "feedback-clientlibs",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "build": "webpack"
 },
 "keywords": [],
 "author": "hkesani",
 "license": "ISC",
 "devDependencies": {
   "css-loader": "^3.5.3",
   "webpack": "^4.43.0",
   "webpack-cli": "^3.3.11"
 },
 "dependencies": {
   "lodash": "^4.17.15"
 }
}

而我的webpack.config.js如下

var path = require('path');

module.export ={
    entry : './js/feedback.js',
    mode:'none',
    output : {
        filename:'feedback.js',
        path:path.resolve(__dirname,'webpack.modules')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['css-loader']

            }
        ]
    }
}

我在 js 文件中导入的 css 很少，如下所示

import '../css/feedback.css' 
import '../css/all.css'

每当我运行构建（我安装了 cssloader）时，我都会看到以下内容

$ npm run build

> feedback-clientlibs@1.0.0 build C:\projects\br_translation\jcr\code\jcr_root\apps\r\dcloud\components\clientlibs\feedback-clientlibs
> webpack

Hash: 7c51d9af54f992c3e551
Version: webpack 4.43.0
Time: 106ms
Built at: 05/10/2020 10:39:42 PM
 1 asset
Entrypoint main = main.js
[0] ./src/index.js 6.17 KiB {0} [built]
[1] ./css/feedback.css 302 bytes {0} [built] [failed] [1 error]
[2] ./css/all.css 292 bytes {0} [built] [failed] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./css/feedback.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #feedback {
|       height: 5em;
|       padding: 10px 22px 8px 22px;
 @ ./src/index.js 1:0-28

ERROR in ./css/all.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .ratings-stars {
|       margin-bottom: 15px;
|       height: 13px;
 @ ./src/index.js 2:0-23
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! feedback-clientlibs@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the feedback-clientlibs@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hkesani\AppData\Roaming\npm-cache\_logs\2020-05-10T17_09_42_363Z-debug.log

感谢任何帮助。谢谢

【问题讨论】：

标签： css npm webpack

【解决方案1】：

你用 style-loader 试过了吗？

npm install --save-dev style-loader

并将您的 webpack.config.js 规则更新为：

rules: [
  {
    test: /\.css$/,
    use: [
         'style-loader',
         'css-loader'
     ]
  }
]

我还注意到您没有为您的 webpack 命令提供生产标志，我将更新该脚本以运行：

webpack --mode production -p

然后在您的输出路径中尝试一个不带句点的目录名称。这可能是也可能不是原因，但通常使用破折号或下划线作为目录名称的命名约定。

path: path.resolve(__dirname,'webpack_modules')

【讨论】：

它与装载机无关。如果您观察到输出 path:path.resolve(__dirname,'webpack.modules') 它应该创建一个新文件夹作为 webpack.modules 并将 bundled.js 放在其中。但它创建了一个 dist 文件夹并将其放置在其中---->它使用默认配置而不是显式配置。
啊，我明白了。好的，我确实注意到您在帖子中的 ./css/feedback.css 1:0 中有一个错误，所以我想您可能遇到了加载问题。您是否尝试过为 webpack 命令添加一个 p 标志并在不带点的情况下命名您的目录。这可能是也可能不是原因，但使用破折号或下划线命名目录是惯例。我会更新我的答案。