Webpack 3.3.0 Config (modern front end apps)

1const webpack = require('webpack');
2// Development Configuration
3// ------------------------------------------------------------------
4const config = {
5    context: __dirname + '/src',
6    entry: {
7        app: './entry.js'
8    },
9    output: {
10        path: __dirname + './dist/assets',
11        filename: '[name].bundle.js',
12        publicPath: "/assets",
13    },
14    devServer: {
15        contentBase: __dirname + '/src',
16    },
17    module: {
18        rules: [
19            {
20                test: /\.js$/,
21                loader: 'babel-loader',
22                query: {
23                    presets: ["babel-preset-es2015"].map(require.resolve)
24                }
25            },
26            {
27                test: /\.(sass|scss)$/,
28                use: [
29                    'style-loader',
30                    'css-loader',
31                    'sass-loader'
32                ]
33            },
34            {
35                test: /\.json$/,
36                loader: "json-loader"
37            }
38        ]
39    },
40    devtool: "eval-source-map",
41    plugins: [new webpack.optimize.ModuleConcatenationPlugin()]
42};
43
44// Production Configurations
45// ------------------------------------------------------------------
46if (process.env.NODE_ENV === "production") {
47    config.devtool = ""; // no sourcemaps
48    config.output.filename = 'bundle.min.js',
49    config.plugins.push(new webpack.optimize.UglifyJsPlugin({minimize: true}));
50  // More Pipes and Stuff (separate build outputs, versioning, etc)
51}
52module.exports = config;