Skip to content

Instantly share code, notes, and snippets.

@MrOrz
Created March 20, 2015 14:01
Show Gist options
  • Save MrOrz/2c854337e8851ccba632 to your computer and use it in GitHub Desktop.
Save MrOrz/2c854337e8851ccba632 to your computer and use it in GitHub Desktop.
My webpack config
// Webpack development server with hot module replacement enabled
// Ref: http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server
//
var serverCfg = require('./config');
if(process.env.NODE_ENV !== 'production') {
var WebpackDevServer = require("webpack-dev-server"),
webpackCfg = require("../client/config/webpack"),
webpack = require("webpack");
(new WebpackDevServer(webpack(webpackCfg), {
publicPath: "/build/",
contentBase: {target: serverCfg.koaServerHostWithPort},
hot: true,
watchDelay: 2000 // Wait for nodemon to restart server
})).listen(serverCfg.webpackDevServerPort, '0.0.0.0', function(){
console.log(`Webpack-dev-server listening at http://0.0.0.0:${serverCfg.webpackDevServerPort}`);
});
}
var webpack = require('webpack'),
ExtractText = require('extract-text-webpack-plugin'),
isProduction = process.env.NODE_ENV === 'production';
// Base config
//
var webpackCfg = {
entry: {
'client': './client/js/client.js',
},
output: {
// __dirname is the path of webpack.js
path: __dirname + '/../build',
filename: ( isProduction ? '[hash].js' : 'client.js')
},
module: {
loaders: [
{
test: /\.styl$/,
loader: ExtractText.extract("css?sourceMap!stylus")
},
{
test: /\.(?:jpg|png|gif|eot|svg|ttf|woff|otf)$/,
loader: "file-loader"
},
{
test: /\.jsx$/, loader: "babel-loader"
},
{
test: /common\/.+\.js$/, loader: 'babel-loader'
},
{
test: /client\/js\/.+\.js$/, loader: 'babel-loader', exclude: /node_modules/
}
]
},
plugins: [
new ExtractText( isProduction ? "[hash].css" : "client.css" )
],
debug: !isProduction,
externals: {
}
};
// Other env-based configs
//
if( isProduction ){
webpackCfg.plugins.push(new webpack.optimize.UglifyJsPlugin({
sourceMap: false
}));
}else{
webpackCfg.devtool = '#source-map';
// Hot module replacement setup
// Ref:
// http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server
// http://gaearon.github.io/react-hot-loader/#enabling-hot-module-replacement
//
// https://gist.github.com/tomchentw/7aaeb427703c4d15705d
//
webpackCfg.entry.client = [
// "?/" instructs socket.io inside webpack-dev-server/client to connect to '/'
'webpack-dev-server/client?/',
'webpack/hot/dev-server',
webpackCfg.entry.client
];
webpackCfg.plugins.push(new webpack.HotModuleReplacementPlugin());
webpackCfg.output.publicPath = '/build/'
}
module.exports = webpackCfg;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment