Skip to content

Instantly share code, notes, and snippets.

@tomitrescak
Created January 8, 2017 13:20
Show Gist options
  • Save tomitrescak/a63ccbd699b16aae71a75fc4d4ebb7b7 to your computer and use it in GitHub Desktop.
Save tomitrescak/a63ccbd699b16aae71a75fc4d4ebb7b7 to your computer and use it in GitHub Desktop.
Middleware Problem
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config');
var app = express();
var compiler = webpack(config);
var port = process.env.PORT || 3000;
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(port, 'localhost', err => {
if (err) {
console.log(err);
return;
}
console.log(`Listening at http://localhost:${port}`);
});
const webpack = require('webpack');
const path = require('path');
const DashboardPlugin = require('webpack-dashboard/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'development';
const isProduction = nodeEnv === 'production';
const jsSourcePath = path.join(__dirname, './src');
const buildPath = path.join(__dirname, './build');
const imgPath = path.join(__dirname, './static');
const sourcePath = path.join(__dirname, './src');
// Common plugins
const plugins = [
new webpack.optimize.CommonsChunkPlugin({
names: 'vendor',
filename: 'vendor-[hash].js',
minChunks: function minChunks(module, count) {
return module.resource && module.resource.indexOf('node_modules') !== -1;
}
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv),
},
}),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'index.html'),
path: buildPath,
filename: 'index.html',
}),
new webpack.LoaderOptionsPlugin({
options: {
// tslint: {
// emitErrors: true,
// failOnHint: true
// },
context: sourcePath,
},
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
new webpack.optimize.MinChunkSizePlugin({
minChunkSize: 1024
})
];
// Common rules
const rules = [
// {
// enforce: 'pre',
// test: /\.tsx?$/,
// loader: 'tslint',
// exclude: /(node_modules)/,
// },
{
enforce: 'pre',
test: /\.js$/,
loader: "source-map-loader"
},
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
loader: [
'awesome-typescript-loader',
],
},
{
test: /\.(png|gif|jpg|svg)$/,
include: imgPath,
use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]',
},
];
if (isProduction) {
// Production plugins
plugins.push(
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
},
output: {
comments: false,
},
}),
new ExtractTextPlugin('style-[hash].css')
);
} else {
// Development plugins
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin()
);
}
module.exports = {
devtool: isProduction ? 'eval' : 'source-map',
// context: jsSourcePath,
entry: {
js: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
path.join(jsSourcePath, 'index.tsx'),
]
},
output: {
path: buildPath,
publicPath: '/',
filename: 'app-[hash].js',
},
module: {
rules,
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
alias: {
'react': 'react-lite',
'react-dom': 'react-lite'
}
},
plugins,
devServer: {
contentBase: isProduction ? './build' : './src',
historyApiFallback: true,
port: 3000,
compress: isProduction,
inline: !isProduction,
hot: !isProduction,
host: '0.0.0.0',
stats: {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
colors: {
green: '\u001b[32m',
},
},
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment