Skip to content

Instantly share code, notes, and snippets.

@learncodeacademy
Created January 8, 2016 03:55
Show Gist options
  • Save learncodeacademy/25092d8f1daf5e4a6fd3 to your computer and use it in GitHub Desktop.
Save learncodeacademy/25092d8f1daf5e4a6fd3 to your computer and use it in GitHub Desktop.
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 }),
],
};
@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

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

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

@ravinila
Copy link

Thank you :)

Copy link

ghost 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

@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

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

Thanks for the sample and intro for webPack!

@manuel-valles
Copy link

Thanks @jmmarco

@cihanselim
Copy link

Thank you !

@MateusAlvarenga
Copy link

Thank you sir

@alexgerdov
Copy link

Thank you!

@sonus
Copy link

sonus commented Aug 10, 2017

Thank you 👍

@iqbalhussain931
Copy link

Thank you :)

@SuperCipher
Copy link

Amen @jmmarco
Thank a lot.

@nateshmbhat
Copy link

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

thanks

@TsutomuNakamura
Copy link

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

Thanks alot

@ianjbark3r
Copy link

Extremely helpful! Thank you!

@bharasagarn
Copy link

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