CODEWITHSUNDEEP
javascriptnode.jswebpack
Aslan French
Aslan French

Reputation: 559

Newbie GET error on Webpack, used for http server and bundling

Okay so I'm a designer learning to code. This is probably a pretty simple issue but I'm stuck and I've been banging my head against the wall for hours trying to figure this out.

I'm following this tutorial here:

https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/

It has a repo that goes along with it here: https://github.com/joezimjs/Webpack-Introduction-Tutorial

I had a bunch of problems at the beginning because "./dist" was not considered a valid path, because relative paths were banned by webpack or something. Changed it to "/dist" and that fixed stuff, but then I ran into problems with the babel loader trying to process the node modules, so I put exclude node modules. That was something in the code on the repo but not in the tutorial so it took me some digging.

I've gotten to example five in the tutorial and I'm trying to run the server so that it creates the html page, but it's not working. I've tried copying and pasting all the original code, but it won't work. The server runs, but when I visit the localhost:8080 it gets a 404 error from the GET / ( which I guess basically means whatever path it's supposed to be getting via http methods isn't working?)

Here's a link to my repo:

https://github.com/thedonquixotic/webpack-practice

Here's my config.json file:

    {
      "name": "webpack-practice",
      "version": "1.0.0",
      "description": "project to practice webpack",
      "main": "index.js",
      "scripts": {
        "prebuild": "del-cli dist -f",
        "build": "webpack",
        "server": "http-server ./dist",
        "start": "npm run build -s && npm run server -s"
      },
      "author": "David Aslan French",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.4",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "del-cli": "^1.1.0",
        "handlebars": "^4.0.11",
        "handlebars-loader": "^1.7.0",
        "html-webpack-plugin": "^3.2.0",
        "http-server": "^0.11.1",
        "webpack": "^4.12.0",
        "webpack-cli": "^3.0.8"
      },
      "dependencies": {
        "lodash": "^4.17.10"
      }
    }

Here's my webpack.config.js file:

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: [
        'babel-polyfill',
        './src/main.js'
    ],
    output: {
        path: '/dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/,
                options: { plugins: ['transform-runtime'], presets: ['es2015'] }
            },
            { test: /\.hbs$/, loader: 'handlebars-loader', exclude: /node_modules/ }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Intro to Webpack',
            template: 'src/index.html'
        })
    ]
};

Sooooo... yeah... I'm burnt out and I can't figure out what I'm doing wrong.

Upvotes: 0

Views: 52

Answers (1)

Aslan French
Aslan French

Reputation: 559

YES!!!! I figured it out!

So here's the deal. It's a bunch of little things adding up.

The core of the problem is that the repo uses webpack 2 but when I npm install webpack it is webpack 4. Webpack 4 requires webpack-cli and webpack-cli doesn't allow for relative paths. So if I change the webpack.config.js file to an absolute path it doesn't create a new folder. And with no folder, there's no way to load the bundled files so it fails the GET the necessary code.

In order to have the correct path I need to use the dirname AND also include the const path =require ('path') solution. Which I just realized @ippi already suggested, and while I had tried the dirname change, I didn't define the const. I'm still really new to Javascript so stuff like that doesn't really occur to me.

Lastly it threw an error for index.html which was just a matter of me needing to add /node_modules/ to the exclude settings for babel. AWESOME! It works!!!!!

Upvotes: 1

Related Questions