Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
* TypeScript runs separately, not through loader, and outputs compiled files to
* .build_cache
*/
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
// var BabiliPlugin = require('babili-webpack-plugin');
var paths = {
src: path.join(__dirname, '.build_cache'),
entry: path.join(__dirname, '.build_cache', 'app', 'index.js'),
out: path.join(__dirname, 'build', 'js')
}
var buildType = process.env.NODE_ENV ? process.env.NODE_ENV : 'production'
// just in case we pass in NODE_DEV = dev
if(/^dev/.test(buildType)) {
buildType = 'development'
}
function getClientEnvironment() {
var REACT_APP = /^REACT_APP_/i
return Object
.keys(process.env)
.filter(function(key) {
return REACT_APP.test(key)
})
.reduce(function(env, key) {
env['process.env.' + key] = JSON.stringify(process.env[key])
return env
}, {
// whenever found in code, process.env.NODE_ENV is replaced with
// the actual value of process.env.NODE_ENV
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
'process.env.NODE_ENV': JSON.stringify(
process.env.NODE_ENV || 'development'
)
})
}
// DefinePlugin with getClientEnvironment
// makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }.
// UglifyJS will remove dead code pased on values of NODE_ENV in code etc.
// This will also make sure that we include production
// or development versions of react etc.
plugins = [
new webpack.DefinePlugin(getClientEnvironment()),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// new WebpackMd5Hash(),
new webpack.optimize.CommonsChunkPlugin({
name: 'lib',
minChunks: function(module) {
return module.context && module.context.indexOf('node_modules') !== -1
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
new InlineManifestWebpackPlugin({
name: 'webpackManifest'
}),
new HtmlWebpackPlugin({
filename: path.join(__dirname, 'templates/index.html'),
template: path.join(__dirname, 'templates/index.ejs'),
inject: false,
excludeChunks: ['manifest'],
hash: false,
cache: true,
showErrors: false
})
]
if(buildType === 'production') {
plugins.unshift(
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
})
)
plugins.push(new webpack.optimize.AggressiveMergingPlugin())
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true, // React doesn't support IE8
warnings: false,
dead_code: true,
drop_debugger: true,
conditionals: true,
comparisons: true,
booleans: true,
loops: true,
unused: true,
if_return: true,
drop_console: true,
unsafe: true
},
mangle: {
screw_ie8: true
},
output: {
comments: false,
screw_ie8: true
}
})
)
}
module.exports = {
bail: false,
devtool: buildType !== 'production' ? 'source-map' : '',
entry: {
app: ['babel-polyfill', paths.entry]
},
output: {
path: paths.out,
publicPath: '/assets/build/js',
filename: '[name].js',
chunkFilename: '.js'
},
plugins: plugins,
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader'
],
}
]
},
target: 'web',
node: {
fs: 'empty',
__filename: false,
__dirname: false
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment