Sample Basic Webpack Config

webpack.config.js

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 }),
  ],
};

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.

Thank you!

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

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

Thank you :)

very helpful !

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.

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

@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.

Thank you! :)

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 }),
  ],
};

Thanks for the sample and intro for webPack!

Thanks @jmmarco

Thank you !

Thank you sir

Thank you!

Thank you 👍

Thank you :)

Amen @jmmarco
Thank a lot.

Thanks so much 👍

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

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 }),
  ],
};

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 👍

thanks

Thanks a lot 😄

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)

Thanks alot

Extremely helpful! Thank you!

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

Life saver!