Intro to the Production Webpack Course

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

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.

Chris Fritz
Chris Fritz
~ 5 years ago

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

Chris Fritz
Chris Fritz
~ 5 years ago

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

samir shah
samir shah
~ 5 years ago

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?

Andreas
Andreas
~ 5 years ago

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

Jonathan Case
Jonathan Case
~ 5 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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

Alex
Alex
~ 5 years ago

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?

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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

james
james
~ 5 years ago

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

Nathan
Nathan
~ 5 years ago

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.

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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!

Nathan
Nathan
~ 5 years ago

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.

Negin Basiri
Negin Basiri
~ 5 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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.

Tim
Tim
~ 5 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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.

Tim
Tim
~ 5 years ago

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

Julia
Julia
~ 4 years ago

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.

Kent C. Dodds
Kent C. Doddsinstructor
~ 4 years ago

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.

Julia
Julia
~ 4 years ago

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: its 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 ))

Kent C. Dodds
Kent C. Doddsinstructor
~ 4 years ago

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.

Thomas Hodges
Thomas Hodges
~ 4 years ago

There are loads of branches of the github project. Which ones are supposed to match the videos?