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 }),
],
};
@sharmadhruv2552
Copy link

sharmadhruv2552 commented Mar 2, 2017

jcb121 @jcb121 thank you so much.:)

@lucianobarauna
Copy link

lucianobarauna commented Mar 7, 2017

Thank you my friend!!!!!!

@folmert
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
Copy link

adam6313 commented Apr 3, 2017

Thank you!

@ThibaultJanBeyer
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
Copy link

chemisiertyran commented Apr 16, 2017

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

@ravinila
Copy link

ravinila commented Apr 27, 2017

Thank you :)

@ramintagizade
Copy link

ramintagizade commented May 19, 2017

very helpful !

@profmocs
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
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
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
Copy link

shansana commented Jun 24, 2017

Thank you! :)

@jmmarco
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
Copy link

BaoPham92 commented Jul 11, 2017

Thanks for the sample and intro for webPack!

@manukempo
Copy link

manukempo commented Jul 12, 2017

Thanks @jmmarco

@cihanselim
Copy link

cihanselim commented Jul 14, 2017

Thank you !

@MateusAlvarenga
Copy link

MateusAlvarenga commented Jul 18, 2017

Thank you sir

@alexgerdov
Copy link

alexgerdov commented Aug 1, 2017

Thank you!

@sonus
Copy link

sonus commented Aug 10, 2017

Thank you 👍

@iqbalhussain931
Copy link

iqbalhussain931 commented Oct 8, 2017

Thank you :)

@SuperCipher
Copy link

SuperCipher commented Oct 30, 2017

Amen @jmmarco
Thank a lot.

@nateshmbhat
Copy link

nateshmbhat commented Dec 10, 2017

Thanks so much 👍

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
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
Copy link

AttoDeba1 commented Jan 15, 2018

thanks

@TsutomuNakamura
Copy link

TsutomuNakamura commented Mar 28, 2018

Thanks a lot 😄

Copy link

ghost 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
Copy link

najm-uddin commented Jul 16, 2018

Thanks alot

@ianjbark3r
Copy link

ianjbark3r commented Oct 2, 2018

Extremely helpful! Thank you!

@bharasagarn
Copy link

bharasagarn commented Dec 29, 2020

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

Life saver!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment