Webpack ignores webpack.config.js

webpack-4
Genarito picture Genarito · Apr 1, 2018 · Viewed 29.7k times · Source

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.

Answer

Carloluis picture Carloluis · Apr 19, 2018

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.

Related questions

Webpack 4 - create vendor chunk

In a webpack 3 configuration I would use the code below to create separate vendor.js chunk: entry: { client: ['./client.js'], vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'], }, output: { filename: '[name].[chunkhash].bundle.js', path: '../dist', chunkFilename: '[name].[chunkhash].…

Read More
Webpack 4 - How to configure minimize?

Webpack 4 comes with the following statement: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead. Fair enough, but I cannot find any information about configuring the UglifyJsPlugin instance running under the hood, for example to change the …

Read More
Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

I was trying to run webpack-4 first time webpack ./src/js/app.js ./dist/app.bundle.js it shows warning / error : WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set …

Read More