14

I am trying to go through a very basic tutorial about Webpack. I cannot get it to compile a very basic single line javascript application. I have installed and uninstalled it multiple times.

It's just a tutorial to learn how to use Webpack. I used npm init to set up the package.json and did nothing else to touch that file. I have a single index.html file and a single app.js file that is suppose to bundle into a bundle.js file.

I enter: webpack app.js bundle.js into the terminal

I keep getting this error:

Jonathans-MBP:webpack-app jonathankuhl$ webpack app.js bundle.js
Hash: 8d502a6e1f30f2ad64ab
Version: webpack 4.1.1
Time: 157ms
Built at: 2018-3-20 12:25:32
 1 asset
Entrypoint main = main.js
   [0] ./app.js 18 bytes {0} [built]
   [1] multi ./app.js 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 ./app.js bundle.js
Module not found: Error: Can't resolve 'bundle.js' in '/Users/jonathankuhl/Documents/Programming/node js/sandbox/webpack-app'
 @ multi ./app.js bundle.js

Here's the package.json, there's nothing in it that I didn't do outside of npm init:

{
"name": "webpack-app",
  "version": "1.0.0",
  "description": "testing",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.1.1"
  }
}

What am I doing wrong? I'm literally doing exactly what the tutorial is telling me to do, step by step. I don't know much about webpack, thought I should look into it, since I want a job in web development. I don't know what it means by "can't resolve 'bundle.js'. It's as if bundle.js doesn't exist, but it's not supposed to exist, webpack creates it.

I've tried alternatives such as doing npm run build after adding "build":"webpack" to my package.json under "scripts", and had no luck. That was before I deleted the entire directory and started over. I've installed and uninstalled both webpack and webpack-cli a few times as well.

What am I doing wrong?

Here's the tut, if it matters: https://www.youtube.com/watch?v=lziuNMk_8eQ It's a little less than a year old, so maybe it's slightly outdated?

Jonathan Kuhl
  • 699
  • 9
  • 23

2 Answers2

60

you need bundle.js as output so try instead this command

webpack app.js -o bundle.js

Talgat Saribayev
  • 1,898
  • 11
  • 19
  • That's what I was missing. Thank you. – Jonathan Kuhl Mar 20 '18 at 17:49
  • 4
    unbelievable, after 2 hours of research the -o was missing puzzle... why they said nothing about it in any documentation – David C. May 17 '18 at 16:41
  • 1
    Webpack documentation is not nice for beginners at all... I had to install webpack globally then installed webpack cli globally then install webpack locally again before it worked – Peter Moses Jan 01 '19 at 02:06
  • Has anything changed with newest version of webpack? This command: webpack app.js -o bundle.js opens file app.js in my default application for .js files instead of building the file. – FrenkyB Dec 04 '19 at 06:45
  • @FrenkyB it is working as expected, at least for me. Check `webpack.config` maybe smth there. – Talgat Saribayev Dec 04 '19 at 16:38
6

I also needed to set the mode explicitly

webpack --mode=development app.js -o bundle.js

to proceed with that tutorial.

axmc
  • 61
  • 1
  • 3