The perfect Webpack Config File: Transpile ES6/ReactJS
var webpack = require('webpack');
var values = require('postcss-modules-values');
var env = process.env.NODE_ENV || 'development';
var minify = env === 'production';
var plugins = [];
if (minify) {
plugins.push(new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}));
} else {
plugins.push(new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
}));
}
var config = {
context: __dirname,
devtool: minify ? 'cheap-module-source-map' : 'eval',
entry: './src/components/level1/index.js',
output: {
path: __dirname + '/dist',
filename: minify ? 'index.js' : 'index-dev.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy']
}
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.css$/,
include: /node_modules/,
loader: 'style!css!postcss'
},
{
test: /\.css$/,
exclude: /node_modules/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=ps_[name]_[local]--[hash:base64:5]',
'postcss-loader'
]
},
{
test: /\.(ttf|eot|svg|woff|woff2|png)$/,
loader: 'url-loader'
}
]
},
plugins: plugins,
postcss: [
values
],
devServer: {
historyApiFallback: true,
contentBase: './'
},
};
module.exports = config;