Skip to content

Instantly share code, notes, and snippets.

@michaelrambeau
Created February 27, 2016 13:33
Show Gist options
  • Save michaelrambeau/b04f83ef16fc78feee09 to your computer and use it in GitHub Desktop.
Save michaelrambeau/b04f83ef16fc78feee09 to your computer and use it in GitHub Desktop.
Script to launch webpack dev server (instead of using `webpack-dev-server --content-base www --hot` command).
// node.js server used to serve assets bundled by Webpack
// use `npm start` command to launch the server.
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('../../config/webpack.local.config');
console.log('Starting the dev web server...');
const port = 8080;
const path = require('path');
const options = {
publicPath: config.output.publicPath,
hot: true,
inline: true,
contentBase: 'www',
stats: { colors: true }
};
const server = new WebpackDevServer(webpack(config), options);
server.listen(port, 'localhost', function (err) {
if (err) {
console.log(err);
}
console.log('WebpackDevServer listening at localhost:', port);
});
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const getVendorModules = require('./common/vendor');
const getCommonPlugins = require('./common/plugins');
const getFullPage =require('../scripts/build/getFullPage');
// filepath used in `output` and `plugins`
const filepath = 'build/';
// http://stackoverflow.com/questions/30030031/passing-environment-dependent-constiables-in-webpack
const envPlugin = new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
});
const plugins = getCommonPlugins(filepath).slice();
plugins.push(envPlugin);
// HotModuleReplacementPlugin is required if wepback-dev-server is not launched from the command line
// using the `--hot` argument.
plugins.push(new webpack.HotModuleReplacementPlugin());
// Get the html template
const html = getFullPage(true);
plugins.push(new HtmlWebpackPlugin({
inject: false,
templateContent: html
}));
plugins.push(new webpack.NoErrorsPlugin());// tells the reloader to not reload if there is a syntax error in your code. The error is simply printed in the console, and the component will reload when you fix the error.)
const modules = getVendorModules();
modules.push('redux-logger');// use redux-logger only in dev
module.exports = {
// Efficiently evaluate modules with source maps
devtool: 'eval',
contentBase: '/www',
entry: {
app: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/entry.jsx'
],
vendor: modules
},
// This will not actually create a bundle.js file in ./build. It is used
// by the dev server for dynamic hot loading.
output: {
path: __dirname + '/build/',
publicPath: 'http://localhost:8080/',
filename: filepath + 'bundle-[name].js',
hot: true
},
// Transform source code using Babel and React Hot Loader
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ["react-hot", "babel"]
},
{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }, // use ! to chain loaders
{ test: /\.css$/, loader: 'style-loader!css-loader' },
]
},
plugins,
// Automatically transform files with these extensions
resolve: {
extensions: ['', '.js', '.jsx', '.coffee']
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment