Instant Webpack 2 By Dan Wellman Does Not Build


#1

Not really sure what the issue is here, that is why I am following the tutorial and trying to learn about Webpack. I can’t get past the 2nd lesson because the code will not build. When I check the source on Github against the source ( or the code I can actually see in the video ) it does not match. I thought this was the whole point of the course. The idea is to download the source from Github and build the code along with the video tutorials. The course is found here: https://code.tutsplus.com/courses/instant-webpack-2/lessons/a-basic-build . At 3:20 Dan Wellman instructs us to build the files using the command npm run build. In the video it works just fine for him, but mine throws an error

instant-webpack@1.0.0 build /Users/user1/Desktop/webpack
webpack --config config/webpack.config.js
/Users/user1/Desktop/webpack/config/webpack.config.js:3
entry: "/app/js/main’,
^^^^^^^^^^^^^^^
SyntaxError: Invalid or unexpected token

I have double checked all of my code. I have the most recent version of Node installed, and everything went fine when I ran npm install to initially install all of the node modules in lesson 1. What am I missing here?


#2

This line of your webpack.config.js:

   entry: "/app/js/main’,

The left is a double quote, the right is a single quote. They need to be the same like this:

   entry: "/app/js/main",

Let me know if you run into any other errors. :slight_smile:


#3

@baileyherbert I’m running into another error at that point.

ERROR in ./app/scss/imports.scss
Module parse failed: /Users/darcyc/tutsplus/instant-webpack/app/scss/imports.scss Unexpected character ‘@’ (1:0)
You may need an appropriate loader to handle this file type.
| @import ‘cards’;
| @import ‘fonts’;
| @import ‘game’;
@ ./app/js/main.js 1:1-30


#4

Fixed, before starting the tutorial remove 1st 2 lines from app/js/main.js below:

import '…/scss/imports.scss’
import angular from ‘angular’


#5

Encountered another error:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
_ - configuration.output.path: The provided value “dist” is not an absolute path!_

To fix change the output path to:
path: __dirname + ‘dist’

Then move the webpack.config.js file to the root folder.

Finally, update the path in package.json
"build": “webpack --config webpack.config.js”