Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample Basic Webpack Config
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/scripts.js",
output: {
path: __dirname + "/js",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
@learncodeacademy

This comment has been minimized.

Copy link
Owner Author

learncodeacademy commented Jan 8, 2016

This is a sample Webpack configuration.
Just run webpack and it will produce unminified output with sourcemaps.
Run NODE_ENV=production webpack and it will minify the output and de-dupe all the unnecessary code.

@rdsimp

This comment has been minimized.

Copy link

rdsimp commented Mar 15, 2016

Thank you!

@prakarangs

This comment has been minimized.

Copy link

prakarangs commented Mar 17, 2016

thanks a lot 👍

@theleancoder

This comment has been minimized.

Copy link

theleancoder commented Mar 20, 2016

Cool

@cablegunmaster

This comment has been minimized.

Copy link

cablegunmaster commented Mar 22, 2016

Thanks! +1

@mjbarlow

This comment has been minimized.

Copy link

mjbarlow commented Mar 23, 2016

Awesome 👍

@socheatyi

This comment has been minimized.

Copy link

socheatyi commented Mar 27, 2016

how to make NODE_ENV=production webpack work on windows console?.
I tried to run the command, but it was unknown command.

@Kronenberg1991

This comment has been minimized.

Copy link

Kronenberg1991 commented Apr 11, 2016

thx dude!

@sjb3

This comment has been minimized.

Copy link

sjb3 commented Apr 16, 2016

suh-weeet!

@davi-mbatista

This comment has been minimized.

Copy link

davi-mbatista commented Apr 19, 2016

Thank you!

@LucasJAlba

This comment has been minimized.

Copy link

LucasJAlba commented Apr 22, 2016

This is awesome thank you.

@lancebailey79

This comment has been minimized.

Copy link

lancebailey79 commented May 3, 2016

@socheatyi

try
echo >> webpack.config.js in the desired directory

@mladenuzelac

This comment has been minimized.

Copy link

mladenuzelac commented May 4, 2016

@socheatyi
I use shell from git unix tools, and it works fine for this example
when you install git with unix tools run: sh -li
and you will have unix shell, after that you can use same command as in tutorial

@sagomm

This comment has been minimized.

Copy link

sagomm commented May 10, 2016

thank your very much ~!

@Hillsie

This comment has been minimized.

Copy link

Hillsie commented May 11, 2016

thanks for this. I'm on windows, for now until I can afford myself a shinny new mac.
On windows:
set NODE_ENV=production
webpack

@ghost

This comment has been minimized.

Copy link

ghost commented May 16, 2016

Thanks! Just five minutes into your youtube tut. Loving webpack already.

@anosikeosifo

This comment has been minimized.

Copy link

anosikeosifo commented May 25, 2016

Thanks much!

@umairmakesbridge

This comment has been minimized.

Copy link

umairmakesbridge commented May 28, 2016

Thanks

@her

This comment has been minimized.

Copy link

her commented May 30, 2016

@learncodeacademy

thanks for this. curious on how I could modify this script to also when running $ NODE_ENV=production webpack it would also minify my css?

thanks again!

@rakshans1

This comment has been minimized.

Copy link

rakshans1 commented Jun 5, 2016

thanks a lot

@proshoumma

This comment has been minimized.

Copy link

proshoumma commented Jun 21, 2016

thank you very much

@KITSTomLoughlin

This comment has been minimized.

Copy link

KITSTomLoughlin commented Jul 4, 2016

Fair play to ya.

@erkgmz

This comment has been minimized.

Copy link

erkgmz commented Jul 8, 2016

Thanks!

@robasaad

This comment has been minimized.

Copy link

robasaad commented Jul 13, 2016

thanks man!

@SamAI-Software

This comment has been minimized.

Copy link

SamAI-Software commented Jul 15, 2016

@socheatyi @lancebailey79 @Hillsie hey guys! I'm struggling for a few days already to resolve the problem with --watch on windows.

If your --watch is working, please visit this stackoverflow link and checkout 3 questions on the bottom. Thanks!

@ealipio

This comment has been minimized.

Copy link

ealipio commented Jul 23, 2016

Thank you my friend!

@jocelo

This comment has been minimized.

Copy link

jocelo commented Jul 25, 2016

works like a charm... thanks for the share

@chadidi

This comment has been minimized.

Copy link

chadidi commented Aug 6, 2016

thanks ;D

@MyShocK13

This comment has been minimized.

Copy link

MyShocK13 commented Aug 7, 2016

Thanks!!

@Kazimirkas

This comment has been minimized.

Copy link

Kazimirkas commented Aug 10, 2016

Tnx!

@uidoyen

This comment has been minimized.

Copy link

uidoyen commented Aug 12, 2016

Cool, Thanks!

@orrbarkat

This comment has been minimized.

Copy link

orrbarkat commented Aug 17, 2016

how do I make webpack run a couple of these in a row?

@Aureliendlg

This comment has been minimized.

Copy link

Aureliendlg commented Sep 13, 2016

Merci!!!

@lenaggar

This comment has been minimized.

Copy link

lenaggar commented Sep 14, 2016

thanks man!

@franklintarter

This comment has been minimized.

Copy link

franklintarter commented Sep 19, 2016

Thank you!

@jcb121

This comment has been minimized.

Copy link

jcb121 commented Sep 21, 2016

This wasn't working for me, well it was partly working. I made the following changes

devtool: debug ? "inline-sourcemap" : false,
new webpack.optimize.OccurrenceOrderPlugin(),

My environment just didn't like the null value and the constructor has been renamed

@ankit-maverick

This comment has been minimized.

Copy link

ankit-maverick commented Sep 22, 2016

@learncodeacademy :

new webpack.optimize.OccurenceOrderPlugin(),

should be

new webpack.optimize.OccurrenceOrderPlugin(),

@deepakkj

This comment has been minimized.

Copy link

deepakkj commented Sep 29, 2016

Thank you

@garethlevi

This comment has been minimized.

Copy link

garethlevi commented Oct 10, 2016

Cheers!

@padrisimo

This comment has been minimized.

Copy link

padrisimo commented Oct 30, 2016

Cool

@Ryan-7

This comment has been minimized.

Copy link

Ryan-7 commented Nov 21, 2016

Thanks!

@CHAOWEICHIU

This comment has been minimized.

Copy link

CHAOWEICHIU commented Nov 21, 2016

thanks!

@marcinruman

This comment has been minimized.

Copy link

marcinruman commented Nov 22, 2016

thanks

@ali-master

This comment has been minimized.

Copy link

ali-master commented Dec 5, 2016

it's goood,
Thanks Master,
I hope Success for You.

@fengxuangit

This comment has been minimized.

Copy link

fengxuangit commented Dec 20, 2016

fucking good!

@keisei1092

This comment has been minimized.

Copy link

keisei1092 commented Jan 5, 2017

great

@taiebb

This comment has been minimized.

Copy link

taiebb commented Jan 26, 2017

Thanks dude!

@sarbull

This comment has been minimized.

Copy link

sarbull commented Jan 29, 2017

@diegohdez90

This comment has been minimized.

Copy link

diegohdez90 commented Feb 3, 2017

Thanks for the code.

@AstroFreakazoid

This comment has been minimized.

Copy link

AstroFreakazoid commented Feb 6, 2017

Thanks dude

@pantharshit00

This comment has been minimized.

Copy link

pantharshit00 commented Feb 8, 2017

Thanks for the code

@francisregan

This comment has been minimized.

Copy link

francisregan commented Feb 8, 2017

I get this error,,

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

  • configuration.devtool should be one of these:
    string | false
    A developer tool to enhance debugging.
    Details:
    • configuration.devtool should be a string.
    • configuration.devtool should be false

** Fix to the above problem**
npm uninstall webpack --save-dev
npm install webpack@2.1.0-beta.21 --save-dev

@rayleigh-z

This comment has been minimized.

Copy link

rayleigh-z commented Feb 11, 2017

@francisregan
If you want to use the latest version of webpack(current version I'm using is 2.2.1), you just need to change line6 as below:
devtool: debug ? "inline-sourcemap" : false,

@shivjoshi

This comment has been minimized.

Copy link

shivjoshi commented Feb 25, 2017

image

Hey @learncodeacademy
Thank you very much for making great great video, It helps us alot.

Hey Guys I was create files according video (https://www.youtube.com/watch?annotation_id=annotation_4139363737&feature=iv&src_vid=MhkGQAoc7bc&v=9kJVYpOqcVU) and everything works well.

I am getting compression / optimize issue.

I am on windows
So I am running following comman
set NODE_ENV=production
webpack

I am getting following error
TypeError: webpack.optimize.OccurnceOrderPlugin is not a function

so it not compress / optimze min.js file

It works fine on non-production version very well.

Please update me if anyone have solution.

@augerm

This comment has been minimized.

Copy link

augerm commented Feb 26, 2017

I had to do the following to get this to work with webpack 2.1.1

  1. I think the plugin was renamed to OccurrenceOrderPlugin() (with two 'r's)
  2. For the dev tool config option I had to change null to false.
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : false,
  entry: "./js/scripts.js",
  output: {
    path: __dirname + "/js",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
}; ```
@shivjoshi

This comment has been minimized.

Copy link

shivjoshi commented Feb 27, 2017

Hey @augerm
Thank you very much for the help.
I tried it and it works well

Thanks you again :)

@zilleilahi

This comment has been minimized.

Copy link

zilleilahi commented Mar 2, 2017

jcb121 @jcb121 thank you so much.:)

@lucianobarauna

This comment has been minimized.

Copy link

lucianobarauna commented Mar 7, 2017

Thank you my friend!!!!!!

@folmert

This comment has been minimized.

Copy link

folmert commented Mar 10, 2017

devtool: debug ? "inline-sourcemap" : null,
By the love of God, don't use inline source maps. My output bundle which normally has ~400KB, has over 1MB with inline source maps.

@adam6313

This comment has been minimized.

Copy link

adam6313 commented Apr 3, 2017

Thank you!

@ThibaultJanBeyer

This comment has been minimized.

Copy link

ThibaultJanBeyer commented Apr 15, 2017

As mentioned above:
devtool: debug ? "inline-sourcemap" : null, should be devtool: debug ? "inline-sourcemap" : false,
and it’s
new webpack.optimize.OccurenceOrderPlugin(), should be new webpack.optimize.OccurrenceOrderPlugin(), with 2 'r'

but what about :
WARNING in DedupePlugin: This plugin was removed from webpack. Remove it from your configuration.
???

thanks @learncodeacademy

@chemisiertyran

This comment has been minimized.

Copy link

chemisiertyran commented Apr 16, 2017

It should be inline-source-map (notice the extra dash) I guess. Thanks for the gist!

@ravinila

This comment has been minimized.

Copy link

ravinila commented Apr 27, 2017

Thank you :)

@ramintagizade

This comment has been minimized.

Copy link

ramintagizade commented May 19, 2017

very helpful !

@profmocs

This comment has been minimized.

Copy link

profmocs commented May 23, 2017

Thanks for putting this together. I had to make the following changes to make it work with webpack 2.6.

  1. On line 14, change the name of OccurenceOrderPlugin to OccurrenceOrderPlugin.
  2. On line 6, change null to false.
@MourrierQ

This comment has been minimized.

Copy link

MourrierQ commented May 29, 2017

I'm on windows, I made all the changes but it still doesn't minify the scripts.min.js when i use SET NODE_ENV=production then webpack.

EDIT: Just restarded the whole thing and now it works but i get the same warning as @ThibaultJanBeyer

@cherukumilli

This comment has been minimized.

Copy link

cherukumilli commented May 30, 2017

@MourrierQ @ThibaultJanBeyer
As per the following article the Dedupe plugin is no longer needed:
https://webpack.js.org/guides/migrating/#dedupeplugin-has-been-removed

I removed it from my webpack.config.js and the warning disappeared.

@shansana

This comment has been minimized.

Copy link

shansana commented Jun 24, 2017

Thank you! :)

@jmmarco

This comment has been minimized.

Copy link

jmmarco commented Jul 8, 2017

Updated configuration file as of 07/08/2017:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : false,
  entry: "./js/scripts.js",
  output: {
    path: __dirname + "/js",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};
@BaoPham92

This comment has been minimized.

Copy link

BaoPham92 commented Jul 11, 2017

Thanks for the sample and intro for webPack!

@manukempo

This comment has been minimized.

Copy link

manukempo commented Jul 12, 2017

Thanks @jmmarco

@chnselim

This comment has been minimized.

Copy link

chnselim commented Jul 14, 2017

Thank you !

@MateusAlvarenga

This comment has been minimized.

Copy link

MateusAlvarenga commented Jul 18, 2017

Thank you sir

@alexgerdov

This comment has been minimized.

Copy link

alexgerdov commented Aug 1, 2017

Thank you!

@sonus

This comment has been minimized.

Copy link

sonus commented Aug 10, 2017

Thank you 👍

@iqbalhussain931

This comment has been minimized.

Copy link

iqbalhussain931 commented Oct 8, 2017

Thank you :)

@SuperCipher

This comment has been minimized.

Copy link

SuperCipher commented Oct 30, 2017

Amen @jmmarco
Thank a lot.

@nateshmbhat

This comment has been minimized.

Copy link

nateshmbhat commented Dec 10, 2017

Thanks so much 👍

@ghost

This comment has been minimized.

Copy link

ghost commented Dec 10, 2017

Yey! But I have small problem :/ I change to name like my js app have name and I've got this
image
and this is code:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/app.js",
  output: {
    path: __dirname + "/js",
    filename: "app.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};
@jhonber

This comment has been minimized.

Copy link

jhonber commented Jan 10, 2018

Updated file
This configuration is not longer valid, I have made needed changes to be a valid configuration:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
-  devtool: debug ? "inline-sourcemap" : null,
+  devtool: debug ? "inline-sourcemap" : false, // true o false value required
  entry: "./js/scripts.js",
  output: {
    path: __dirname + "/js",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
-    new webpack.optimize.DedupePlugin(), // this plugin was removed from webpack
-    new webpack.optimize.OccurenceOrderPlugin(),
+   new webpack.optimize.OccurrenceOrderPlugin(), // name was changed from OccurenceOrderPlugin to OccurrenceOrderPlugin
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

Nice gist thanks 👍

@AttoDeba1

This comment has been minimized.

Copy link

AttoDeba1 commented Jan 15, 2018

thanks

@TsutomuNakamura

This comment has been minimized.

Copy link

TsutomuNakamura commented Mar 28, 2018

Thanks a lot 😄

@fleekdeveloper

This comment has been minimized.

Copy link

fleekdeveloper commented May 30, 2018

Hi, I am using the following (updated) version but getting some errors after running webpack command:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : false,
  entry: "./js/scripts.js",
  output: {
    path: __dirname + "/js",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

Error:

SyntaxError: Invalid or unexpected token
    at NativeCompileCache._moduleCompile (C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:226:18)
    at Module._compile (C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:172:36)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack-cli\bin\convert-argv.js:133:13)
    at requireConfig (C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack-cli\bin\convert-argv.js:135:6)
    at C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack-cli\bin\convert-argv.js:142:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack-cli\bin\convert-argv.js:140:15)
    at yargs.parse (C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack-cli\bin\webpack.js:240:39)
    at Object.parse (C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\yargs\yargs.js:552:18)
    at C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack-cli\bin\webpack.js:218:8
    at Object.<anonymous> (C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack-cli\bin\webpack.js:515:3)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\hdeve\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:157:2)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)

@Najm-uddin

This comment has been minimized.

Copy link

Najm-uddin commented Jul 16, 2018

Thanks alot

@ianjbark3r

This comment has been minimized.

Copy link

ianjbark3r commented Oct 2, 2018

Extremely helpful! Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.