Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 972 of the free egghead.io lessons, plus get Tools content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Intro to the Production Webpack Course

2:14 Tools lesson by

There are several lessons that will build on top of this project. It is a fairly standard, small webpack bundled project. In this lesson we’ll explore the project a bit so you’re familiar with how things are set up for future lessons.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

There are several lessons that will build on top of this project. It is a fairly standard, small webpack bundled project. In this lesson we’ll explore the project a bit so you’re familiar with how things are set up for future lessons.

Avatar
Ningze

which sublime text theme are you using?

In reply to egghead.io
Avatar
Kent C.

I'm using Atom, and here are my plugins: https://github.com/kentcdodds/ama/issues/113#issuecomment-226889303
I'm using the default theme.

In reply to Ningze
Avatar
Chris

I believe -p is a shortcut for --optimize-minimize, rather than "telling Webpack to run in production mode" as suggested in the video.

Avatar
Chris

I apologize! It looks like this has changed in Webpack 2 and we're both right. :-)

In reply to Chris
Avatar
samir shah

while installing npm packages I am getting peer dependencies versioning mismatch issue.

Error -

npm ERR! peerinvalid The package webpack@2.1.0-beta.12 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer babel-loader@6.2.4 wants webpack@1 || ^2.1.0-beta
npm ERR! peerinvalid Peer karma-webpack@1.7.0 wants webpack@^1.4.0
npm ERR! peerinvalid Peer webpack-dev-server@2.0.0-beta wants webpack@>=2.0.3-beta <3

Has any one faced something like this?

Avatar
Andreas

Have you seen this in the readme? "... you’ll have to use npm version 3 to be able to install the dependencies"

In reply to samir shah
Avatar
Jonathan Case

Do you have a link to the tutorial on the actual ToDo app featured in this video? I can't seem to find it.

Avatar
Kent C.

A link should be at the bottom of each of the lesson videos, but you can find the repo here: https://github.com/kentcdodds/es6-todomvc

In reply to Jonathan Case
Avatar
Alex

I've started my own project and downloaded the todo project and changed it to the correct lesson to try the same thing. Both times I get the same error which is due to the ES6 code in the webpack.config.js (SyntaxError: Unexpected token {). Do you have some global settings that are automatically transpiling this config file?

Avatar
Kent C.

You'll want to install Node version 6 which doesn't require transpiling of most ES6 features. You can get it with nvm. Or you can change the filename to webpack.config.babel.js

In reply to Alex
Avatar
james

Do you show us how to deploy to Heroku or AWS in the videos. I'm about to start watching now.

Avatar
George

First video on this intro tutorial needs to take a step back and explain Webpack at a high level instead of immediately dropping way Webpack specific concepts/words with no explanation.

In reply to egghead.io
Avatar
Nathan

Awesome course!

One thing I think it would be good to cover is how to set up multiple variables per each environment. Let's say your app has to hit multiple APIs and those APIs have environment specific urls. Would you store these in a [env].json file? And how would use leverage these in your webpack configuration.

Avatar
Kent C.

Sorry George, this course is intended to be an advanced course and expects you to have experience with webpack. There are a few more beginner-level lessons on Egghead.io as well: http://kcd.im/egghead-webpack

In reply to George
Avatar
Kent C.

Hi Nathan,
Glad you like the course! There are quite a few ways you could accomplish this with or without webpack. One that you might be interested in is the val-loader. You might also use the DefinePlugin. If it were me though, I'd probably use the val-loader and make the result be the configuration based on some environment variable or something. Good luck!

In reply to Nathan
Avatar
Nathan

Kent,

In the past we have used something like the following.

resolve: {
            alias: {
                config: `config/${env.toLowerCase()}.js`
            }
        },

With Webpack 2 the env comes across as a boolean and not the name. This code I had to write seems a bit lame.

const getEnv = () => {
        if (env.prod) {
            return 'production'
        } else if (env.test) {
            return 'test'
        } else if (env.phase2) {
            return 'phase2'
        } else if (env.dev) {
            return 'dev'
        }
    }

Maybe we should add a utility method to your handy utils.

In reply to Kent C.
Avatar
Negin

I changed my file name to webpack.config.babel.js and I'm still getting

C:\FE-Proj-Templates\webpack\webpack.config.babel.js:5
const { resolve } = require('path');
^

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module.compile (module.js:373:25)
at loader (C:\FE-Proj-Templates\webpack\node
modules\babel-core\node_modules\babel-register\lib\
node.js:146:5)

PS: I'm using webpack 2.0

In reply to Kent C.
Avatar
Kent C.

Hmmm... Try installing babel-register? That feature is kinda magical to me. I'm not sure I understand how it works to be honest.

Ever better: Install the latest version of node. I recommend using nvm.

In reply to Negin
Avatar
Tim

i keep getting the error "Config did not export an object." when trying to run webpack.

Avatar
Kent C.

Hi Tim!
I recommend that you post a question on StackOverflow with your webpack config to get some help. I expect you'll get an answer pretty quickly.

In reply to Tim
Avatar
Tim

Thanks Kent will remember that. Realised I had webpack 1 installed.

In reply to Kent C.
Avatar
Julia

Hi,i am sorry for my lammer question, but i cant find answer ib google, fork from github materials for this lesson and when strt webpack error appear 'Error:webpack-config-utils:getIfUtils: env passed shoul be a string/Object. Was '+JSON.stringify(env)''.
My os windows 10, webpack installed global v 2.2.1
Can you help me with this? I would be very grateful.

Avatar
Kent C.

If you could file an issue on the workshop repo with the exact steps you took and the full error message, I'll try to help when I can.

In reply to Julia
Avatar
Julia

Hi, once again, i resolve my previos problem, but I'm having the same type of error 'Error:cant resolve 'css' in c:\es6-todomvc\src'
BREAKING CHANGE: it
s no longer allowed to ommit '-loader' suffix, when using loaders.You need to specify 'css-loader', instead of 'css'.
the same with babel (

I will be very grateful for the help ))

Avatar
Kent C.

This course was developed with a beta version of webpack several months ago. You'll want to look at the changelog for webpack to see what's changed since then.

In reply to Julia

In this course, we're going to be dealing with Todo's MVC application. It's based off of the Vanilla JS implementation and has been ported to ES6 and Webpack. In this lesson I'm just going to take you through a brief overview of how this application is put together, because lots of the lessons in this course will be dependent on some of these things that are already pre-set up.

Here's our Webpack configuration file. We are using Webpack 2. This is actually a function that accepts an environment object and it returns our Webpack configuration object. We have our entry here, which resolves to our app.js file, which is in our source directory right there.

Our output will just simply go to our dist directory with the filename of Bundle. The context for our application is the source directory and we have two types of files that we're loading -- first the JS files and the CSS files. The JS files are being loaded with ESLint and then in Babble. The CSS files are loaded with the CSS loader and then the style loader.

We have a couple of scripts that we're using. First we have Build, which will build the development version of our application, and then Build Prod, which builds the production version. Here we're specifying the EMV as dev or our development build, and the EMV is prod for our production build. We're also passing this -p flag to tell Webpack to operate in production mode.

We'll often use the Start script, which uses the Webpack Dev Server, specifying the environment as Dev, and the content base as the dist directory. We have a pre-start, which we'll run clean and copy script, which deletes our dist directory, with this Clean Dist script. It will copy the necessary files to our dist directory.

We have a source Index HTML and a source favicon that will go into that dist directory. We also have tests in this project, so we have a test script with Karma Start. We also have watch test, which will run that in Watch mode.

That's the overview of the project. I hope you enjoy the course.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?