webpack 4

package.json

  "scripts": {
    "dev": "node .dev/webpack.dev.server.js",
    "dev-prod": "node .dev/webpack.dev.server.js --production",
    "build": "rimraf ./dist && webpack --config .dev/webpack.config.production.js --colors",
},
"devDependencies": {
    "@babel/core": "7.0.0-beta.38",
    "@babel/plugin-proposal-class-properties": "7.0.0-beta.38",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.38",
    "@babel/plugin-transform-classes": "7.0.0-beta.38",
    "@babel/plugin-transform-runtime": "7.0.0-beta.38",
    "@babel/preset-env": "7.0.0-beta.38",
    "@babel/preset-react": "7.0.0-beta.38",
    "@babel/preset-stage-0": "7.0.0-beta.38",
    "babel-loader": "8.0.0-beta.0",
    "css-loader": "0.28.9",
    "html-webpack-plugin": "git://github.com/Graham42/html-webpack-plugin.git#feat/webpack-4",
    "image-webpack-loader": "4.0.0",
    "progress-bar-webpack-plugin": "1.10.0",
    "react-hot-loader": "4.0.0-beta.18",
    "react-hot-loader-loader": "^0.0.3",
    "uglifyjs-webpack-plugin": "1.1.6",
    "webpack": "4.0.0-beta.0",
    "webpack-bundle-analyzer": "2.9.2",
    "webpack-cli": "^2.0.4",
    "webpack-dev-middleware": "^2.0.4",
    "webpack-hot-middleware": "^2.21.0",
    "webpack-notifier": "1.5.1",
    "yargs": "^11.0.0"
  },
  "dependencies": {
    "@babel/polyfill": "7.0.0-beta.38",
    "@babel/runtime": "^7.0.0-beta.38",

webpack.config.base.js

const path = require('path')
const WebpackNotifierPlugin = require('webpack-notifier')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    output: {
        filename: '[name].[hash].bundle.js',
        chunkFilename: '[name].[hash].chunk.js',
        path: path.resolve('./dist'),
        publicPath: '/',
    },
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            {
                test: /\.(gif|png|jpe?g|svg)$/,
                use: [
                    'file-loader?hash=sha512&digest=hex&name=images/[hash].[ext]',
                    'image-webpack-loader',
                ],
            },
        ],
    },
    resolve: {
        modules: [path.resolve('./'), path.resolve('./node_modules'), 'node_modules'],
        extensions: ['.js', '.jsx'],
    },
    plugins: [
        new HtmlWebpackPlugin({ template: path.resolve('./.dev/index.template.ejs'), inject: true }),
        new ProgressBarPlugin(),
        new WebpackNotifierPlugin(),
    ],
    performance: { hints: false },
}

webpack.config.development.js

const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
const Base = require('./webpack.config.base')

const options = {
    babelrc: false,
    cacheDirectory: true,
    presets: [
        ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
        '@babel/preset-stage-0',
        '@babel/preset-react',
    ],
    plugins: [
        'react-hot-loader/babel',
        // The following three only due to react-hot-loader having trouble with real classes atm
        '@babel/plugin-proposal-decorators',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-transform-classes',
    ],
}

module.exports = {
    ...Base,
    module: {
        rules: [
            ...Base.module.rules,
            { test: /\.jsx?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options } },
            { test: /\/App\.js$/, loader: 'react-hot-loader-loader' },
        ],
    },
    entry: ['webpack-hot-middleware/client', 'index.js'],
    plugins: [
        ...Base.plugins,
        new webpack.HotModuleReplacementPlugin(),
        new webpack.SourceMapDevToolPlugin(),
    ],
    devServer: { hot: true, contentBase: path.resolve('./'), stats: 'errors-only', historyApiFallback: true },
    devtool: 'cheap-module-eval-source-map',
    mode: 'development',
}

webpack.config.production.js

const webpack = require('webpack')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const Base = require('./webpack.config.base')

const options = {
    babelrc: false,
    cacheDirectory: true,
    presets: [['@babel/preset-env', { modules: false, loose: true, useBuiltIns: 'usage' }], '@babel/preset-stage-0', '@babel/preset-react'],
    plugins: [
        ['@babel/transform-runtime', { helpers: true, polyfill: false, regenerator: true, moduleName: '@babel/runtime' }],
    ],
}

module.exports = {
    ...Base,
    module: {
        rules: [
            ...Base.module.rules,
            { sideEffects: false, test: /\.jsx?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options } },
        ],
    },
    entry: ['./.dev/polyfills.js', 'index.js'],
    plugins: [
        ...Base.plugins,
        new BundleAnalyzerPlugin({ openAnalyzer: false, analyzerMode: 'static', defaultSizes: 'gzip' }),
        new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }),
    ],
    devtool: undefined,
    optimization: { runtimeChunk: true, splitChunks: { chunks: 'all' } },
    mode: 'production',
}

webpack.dev.server.js

const webpack = require('webpack')
const express = require('express')
const middleware = require('webpack-dev-middleware')
const argv = require('yargs').argv
const path = `./webpack.config.${argv.production ? 'production' : 'development'}`
const config = require(path)

const compiler = webpack(config)
const app = express()

app.use(middleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(require('webpack-hot-middleware')(compiler))
app.listen(8080, () => console.log('App listening on port 8080!'))