CODEWITHSUNDEEP
webpack-4
Genarito
Genarito

Reputation: 3463

Webpack ignores webpack.config.js

I'm following this tutorial because I'm new with Webpack... My webpack.config.js is:

module.exports = {
    entry: "./app/entry",
    mode: "development",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
};

And my package.json:

{
  "name": "pruebaWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  },
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0"
  }
}

But apparently It's ignoring my config file because when I run npm run build It uses default paths (entry = ./src y output = ./dist) and doesn't recognize the mode attribute:

[email protected] build /opt/lampp/htdocs/pruebaWebpack

webpack

Hash: 4a9c3de0f194dd38ac70 Version: webpack 4.4.1

Time: 234ms

Built at: 2018-4-1 15:53:00 Asset Size Chunks
Chunk

Names main.js 564 bytes 0 [emitted] main Entrypoint main = main.js [0] ./src/index.js 19 bytes {0} [built]

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/concepts/mode/

Thanks in advance and sorry about my English.

Upvotes: 9

Views: 42745

Answers (4)

Genarito
Genarito

Reputation: 3463

I had the same problem last week and I noticed that there was a whitespace character at the beginning of the filename (" webpack.config.js") that is not visible in VS Code. Probably It was the real problem when I made the question.

Hope It helps

Upvotes: 7

Louay Al-osh
Louay Al-osh

Reputation: 3415

For me, it was the silly mistake of typing module.export instead of module.exports in the config file.

Upvotes: 9

Carloluis
Carloluis

Reputation: 4320

The config excerpt shared in your question seems correct. Therefore, the problem could be even a typo. If you want to share the project code to reproduce the issue I could help more.

Review my Webpack Demo on GitHub with working configs files as a starting point.

Read more about configuring Webpack.

Upvotes: 10

JuMoGar
JuMoGar

Reputation: 1760

webpack.config.js. Try something like: 

const WEBPACK = require('webpack');
const PATH = require('path');

module.exports = {
resolve: {
    extensions: ['.js', '.jsx']
},
context: __dirname,
entry: {
    app: ['./src/index.jsx'] // app: ['./MY_FOLDER_INPUT/MY_FILE_INDEX.jsx']
},
output = {
    path: PATH.join(__dirname, '/MY_FOLDER_OUTPUT'),
    filename: 'index.js'
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        }
    ]
}
};

package.json. Add next scripts:

"scripts": 
{ 
    "build": "webpack-dev-server --mode development --open", 
    "prod_build": "webpack --mode production" 
}

It should works

Upvotes: 7

Related Questions