Okay so I'm a designer learning to code so please forgive my ignorance here.
I'm trying to learn webpack using this tutorial: https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
The repo for the tutorial is here: https://github.com/joezimjs/Webpack-Introduction-Tutorial
My repo for what I've done is here: https://github.com/thedonquixotic/webpack-practice
Following along with the tutorial I had some problems along the way, mostly due to changes in webpack I think. I'm currently on example 5 (the repo has branches for each step in the process).
I've done a ton of troubleshooting on this and I think I've finally found out why!
When I type npm run the server is booted up, but the dist folder isn't created and the server throws an http method error when I visit the page and it can't find the template.
I've gone through and double checked everything, and what I found was, that the crucial difference between the two is that the tutorial repo loads webpack 2, and my repo loads webpack 4. And when I load webpack 4 I am add webpack-cli and the relative path for the output specified in the webpack.config.js as "./dist" no longer works.
If I don't change the "./dist" then it throws an error saying it requires absolute paths. If I do change it to "/dist" then it fails to actually create the dist folder.
Since I assume that I should be using the latest version of Webpack 4, how do I get around this?
I've already tried the path.resolve(__dirname, 'dist') and that isn't fixing things on the webpack 4 version.
When I do the path.resolve solution it gives me a different error instead. The server won't even boot up. It does create the dist folder but it throws a new set of errors (it looks to be related to the index.html file) It looks like this:
> webpack-practice@1.0.0 start /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2
> npm run build -s && npm run server -s
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:244
throw err;
^
ReferenceError: path is not defined
at Object.<anonymous> (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/webpack.config.js:9:15)
at Module._compile (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:133:13)
at requireConfig (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:135:6)
at /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:142:17
at Array.forEach (<anonymous>)
at module.exports (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:140:15)
at yargs.parse (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:241:39)
at Object.parse (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/node_modules/yargs/yargs.js:552:18)
at /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:219:8
at Object.<anonymous> (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:530:3)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack/bin/webpack.js:157:2)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-practice@1.0.0 start: `npm run build -s && npm run server -s`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-practice@1.0.0 start 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! /home/david/.npm/_logs/2018-06-20T19_12_54_953Z-debug.log
Not really sure what to do here.
Okay so I've found that the issue with 4 is that it can't resolve.path without this being added to the webpack configuration file at the top: const path = require('path');
When I add that in, it still doesn't work but it throws a NEW error that looks like this:
> webpack-practice@1.0.0 start /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2
> npm run build -s && npm run server -s
[BABEL] Note: The code generator has deoptimised the styling of "/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".
Hash: 5c8bf89bcb7897b20228
Version: webpack 4.12.0
Time: 13034ms
Built at: 06/20/2018 1:24:10 PM
Asset Size Chunks Chunk Names
bundle.js 215 KiB 0 [emitted] main
index.html 1.37 KiB [emitted]
[100] (webpack)/buildin/global.js 770 bytes {0} [built]
[147] (webpack)/buildin/amd-options.js 82 bytes {0} [built]
[152] (webpack)/buildin/module.js 521 bytes {0} [built]
[248] ./src/numberlist.hbs 931 bytes {0} [built]
[250] ./src/main.js 438 bytes {0} [built]
[542] multi babel-polyfill ./src/main.js 40 bytes {0} [built]
+ 537 hidden modules
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/
```
ERROR in Error: /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1937
$export($export.S + $export.F * !__webpack_require__(1), 'Object', { defineProperty: __webpack_require__(6).f });
^
TypeError: $export is not a function
- index.html:1937 Object.<anonymous>
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1937:1
- index.html:21 __webpack_require__
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30
- index.html:1946 Object.<anonymous>
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1946:1
- index.html:21 __webpack_require__
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30
- index.html:1959 Object.module.exports
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1959:31
- index.html:21 __webpack_require__
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30
- index.html:175 Object.<anonymous>
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:175:23
- index.html:21 __webpack_require__
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30
- index.html:243 Object.<anonymous>
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:243:10
- index.html:21 __webpack_require__
/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30
Child html-webpack-plugin for "index.html":
1 asset
[46] (webpack)/buildin/module.js 521 bytes {0} [built]
[98] (webpack)/buildin/global.js 770 bytes {0} [built]
[100] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 492 bytes {0} [built]
+ 98 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-practice@1.0.0 start: `npm run build -s && npm run server -s`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-practice@1.0.0 start 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! /home/david/.npm/_logs/2018-06-20T19_24_10_672Z-debug.log
I figured it out!!!!
Okay so here's the deal. I searched the bug output "$export is not a function" and it seems the only thing I needed to do was add exclude /node_modules/ to my babel loader! Woo! Finally!!!!
In total the changes I had to make was make it supported webpack 4, create const 'path' in the webpack.config.js file, use the resolve.path dirname, and then make sure to exlude the node modules and it WORKS!!!