I'm trying to learn Webpack but I've got an error when I try to do the most simple webpack mand so it's very frustating. Here is my error :

PS D:\Projets\#Bazar\WebPackTry> webpack src/js/main.js dist/bundle.js
Hash: 67b5c95f9d0dfcab805d
Version: webpack 4.0.0
Time: 227ms
Built at: 2018-2-25 12:41:17
  1 asset
Entrypoint main = main.js
[0] ./src/js/main.js + 1 modules 83 bytes {0} [built]
    | ./src/js/main.js 32 bytes [built]
    | ./src/js/log.js 51 bytes [built]
[1] multi ./src/js/main.js dist/bundle.js 40 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in multi ./src/js/main.js dist/bundle.js
Module not found: Error: Can't resolve 'dist/bundle.js' in ' 
D:\Projets\#Bazar\WebPackTry'
@ multi ./src/js/main.js dist/bundle.js

So as you can see I made this mand : webpack src/js/main.js dist/buundle.js and webpack throw me this error.

I tried with absolute paths and I thought that the name of my path with #Bazar would be the issue. But even when changing them I've got the same error.

The only way I succeed was when I created myself a dist/bundle.js

But even like these webpack create another file in my dist folder call main.js

I tried to follow multiple tutorials butI didn't found any information about this error.

Also this is my project architecture

WebpackTry
|-node_modules
|-dist
|-src
|  |-css
|  |-js
|     |log.js
|     |main.js
|index.html
|package-lock.json
|package.json

PS: Sorry for my english :/

PS2: I can't post images yet so I had copy / paste my errors

I'm trying to learn Webpack but I've got an error when I try to do the most simple webpack mand so it's very frustating. Here is my error :

PS D:\Projets\#Bazar\WebPackTry> webpack src/js/main.js dist/bundle.js
Hash: 67b5c95f9d0dfcab805d
Version: webpack 4.0.0
Time: 227ms
Built at: 2018-2-25 12:41:17
  1 asset
Entrypoint main = main.js
[0] ./src/js/main.js + 1 modules 83 bytes {0} [built]
    | ./src/js/main.js 32 bytes [built]
    | ./src/js/log.js 51 bytes [built]
[1] multi ./src/js/main.js dist/bundle.js 40 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in multi ./src/js/main.js dist/bundle.js
Module not found: Error: Can't resolve 'dist/bundle.js' in ' 
D:\Projets\#Bazar\WebPackTry'
@ multi ./src/js/main.js dist/bundle.js

So as you can see I made this mand : webpack src/js/main.js dist/buundle.js and webpack throw me this error.

I tried with absolute paths and I thought that the name of my path with #Bazar would be the issue. But even when changing them I've got the same error.

The only way I succeed was when I created myself a dist/bundle.js

But even like these webpack create another file in my dist folder call main.js

I tried to follow multiple tutorials butI didn't found any information about this error.

Also this is my project architecture

WebpackTry
|-node_modules
|-dist
|-src
|  |-css
|  |-js
|     |log.js
|     |main.js
|index.html
|package-lock.json
|package.json

PS: Sorry for my english :/

PS2: I can't post images yet so I had copy / paste my errors

• javascript
• webpack
• module
• path

2 Answers 2

The following is the help message from webpack by typing webpack --help in webpack 4

Usage without config file: webpack <entry> [<entry>] --output [-o] <output>

Notice: --output need to be specified explicitly

Solution:

webpack src/js/main.js --output dist/bundle.js --mode development

Add --output to it and specify the mode option will be ok.

I remend you read through the official documentation, and set up a webpack.config.js file in your root directory. Also, move all your source files into src/ (including index.html).

The following is a sample webpack.config.js file, customized to fit your current project structure.

const path = require('path');

module.exports = {
  entry: './src/js/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};