tp-react-elemental/webpack.config.js

React Elemental

const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const NpmInstallPlugin = require('npm-install-webpack-plugin')

const TARGET = process.env.npm_lifecycle_event
const PATHS = {
    app: path.join(__dirname, 'site'),
    build: path.join(__dirname, 'public')
}

process.env.BABEL_ENV = TARGET

const common = {
    entry: path.join(__dirname, 'site', 'index.js'),
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        path: PATHS.build,
        publicPath: '/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
                test: /\.scss$/,
                include: __dirname,
                loaders: [
                    'style',
                    'css',
                    'sass'
                ]
            }, {
                test: /\.jsx?$/,
                include: __dirname,
                exclude: /node_modules/,
                loader: 'babel-loader', // requires babel-loader
                query: {
                    presets: ['react', 'es2015', 'stage-1'] // requires babel-preset-<name>
                }
            }, {
                test: /.*\.(gif|png|jpe?g|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
                ]
            }, {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=application/octet-stream'
            },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }
        ]
    },
    resolve: {
        root: [path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'site'),
        path.resolve(__dirname, 'node_modules')],
        extensions: ['', '.js', '.jsx']
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: PATHS.build,

        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,

        // display only errors to reduce the amount of output
        stats: 'errors-only',

        // parse host and port from env so this is easy
        // to customize
        host: process.env.HOST,
        port: process.env.PORT
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new NpmInstallPlugin({
            save: true // --save
        })
    ]
}

module.exports = common