'webpack keeps using default config even when i have a custom webpack.config.js

I started learning webpack. I am aware that webpack4 doesnt require a configuration explicitly. I created one for my project. On every build i see it picking up default config. below is my 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"
 }
}

and my webpack.config.js is as follows

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']

            }
        ]
    }
}

I have few css imports into the js files as below

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

whenever i run a build (i have cssloader installed) below is what i see

$ npm run build

> [email protected] 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! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] 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

Any help is appreciated. Thanks

cssnpmwebpack


Solution 1:[1]

Have you tried it with style-loader?

npm install --save-dev style-loader

And update your webpack.config.js rules to:

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

I also notice you did not supply a production flag for your webpack command I would update that script to run:

webpack --mode production -p

Then in your output path try a directory name without the period. This may or may not be the reason but it is normally a naming convention to use a dash or underscore for directory names.

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

Solution 2:[2]

I think it's defined [here]enter link description here.

It can also be inspected via node:

const webpack = require('webpack') new webpack.WebpackOptionsDefaulter()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 AliAbuhumra

Related Questions