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