JavaScript Automating Your Development with webpack Dev Server

Oziel Perez
Oziel Perez
61,319 Points

MAJOR UPDATE: Must read if you are having problems with webpack

If people are still having problems with web pack and, additionally, with babel, be sure that your package.json file looks like this:

{
  "name": "webpack-treehouse-example",
  "version": "0.0.1",
  "scripts": {
    "build": "webpack --optimize-minimize",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.23.1",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^3.8.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^3.10.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "3.0.0"
  },
  "dependencies": {
    "jquery": "^3.1.0"
  }
}

The first thing I want to point out is webpack itself. You must upgrade your version of webpack to version 3.10.0 (at the time of this comment). The reason for this is because if you upgrade to the latest version (4.x.x), the entire build will break. Html-webpack-plugin is not supported for the latest version at this time, so to prevent the "compilation.mainTemplate.applyPluginsWaterfall is not a function" error, you have to use version 3.10.0 of webpack. In this json file, this is the latest html-webpack-plugin version at this time. See this github issue thread for more insight: https://github.com/jantimon/html-webpack-plugin/issues/860

Next, install webpack-dev-server version 3.0.0 (yes this version). The latest version, 3.1.x, gives error that it cannot read property 'compile' of undefined. According to this github thread (https://github.com/webpack/webpack-dev-server/issues/1334), version 3.X.X is meant to run only with webpack version 4.X.X, so it is recommended to downgrade to dev server version 2.X.X but it seems version 3.0.0 works ok. Thread carefully.

Next, make sure that you install babel-core. Otherwise, you will get a dependency error. Apparently it was not included in this branch.

I took the liberty of upgrading babel-loader and the presets as well to the latest current versions (at the time of this comment).

Next, you have to install webpack-cli. Apparently, this is a separate package needed to run webpack in the command line. You will get error if it's not there.

Lastly, configure your webpack.config.js file like so:

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

var webpackConfig = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                loader: "babel-loader",
                test: /\.js$/,
                exclude: path.resolve(__dirname, "node_modules")
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.ejs"
        })
    ]
};

module.exports = webpackConfig;

I updated my package.json. Deleted node_modules and package-loc.json and ran 'npm install' again. All packages seem to be installed except when I run npm list webpack it gives:

webpack-treehouse-example@0.0.1 /home/vang/code/treehouse/webpack-workshop └── (empty)

npm list babel-core gives:

webpack-treehouse-example@0.0.1 /home/vang/code/treehouse/webpack-workshop └─┬ babel-core@6.26.3 └─┬ babel-register@6.26.0

babel-core is in the package.json, why do you have say 'make sure that babel-core is installed.' Isn't it installed just part of npm install?

I'm on ubuntu. Why isn't webpack being listed as installed?

npm run build errors out:

webpack-treehouse-example@0.0.1 build /home/vang/code/treehouse/webpack-workshop webpack --optimize-minimize

Hash: 6477fffc92b6523ae42d Version: webpack 3.12.0 Time: 595ms Asset Size Chunks Chunk Names bundle.js 709 bytes 0 [emitted] main index.html 2.04 kB [emitted]
[0] ./src/index.js 284 bytes {0} [built]

ERROR in ./src/index.js Module not found: Error: Can't resolve './loadDropDown' in '/home/vang/code/treehouse/webpack-workshop/src' @ ./src/index.js 3:20-45 Child html-webpack-plugin for "index.html": 1 asset [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 2.4 kB {0} [built] [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/home/vang/.npm/_logs/2018-05-16T19_56_44_092Z-debug.log/module.js 517 bytes {0} [built] + 1 hidden module npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! webpack-treehouse-example@0.0.1 build: webpack --optimize-minimize npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the webpack-treehouse-example@0.0.1 build 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/vang/.npm/_logs/2018-05-16T19_56_44_092Z-debug.log

Oziel Perez
Oziel Perez
61,319 Points

Vang Nguyen, that's strange behavior. I do see the directory under node modules listing webpack, and if your npm run build script is working then webpack is installed, it's just for some reason npm won't list it.

I mention to explicitly install babel-core just in case you cloned the repo from teamtreehouse. As far as I could tell, babel-core was not in that original package.json file and was throwing errors because it was not there, so as long as you npm install it or you write it in your package.json and install from there, you should be fine.

As for you build error, it appears that you may be missing a component of some sort. Have you checked that the js file for loadDropDown wasn't accidentally deleted?