webpack.config.js
const webpack = require('webpack');
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const BUILD_PATH = path.join(__dirname, 'dist');
const APP_PATH = path.join(__dirname, 'src');
const VENDOR_LIBS = ['react', 'react-dom', 'react-router-dom', 'axios', 'redux', 'redux-saga', 'react-redux'];
var config = {
devtool: 'cheap-module-eval-source-map',
entry: {
bundle: APP_PATH + '/index.js',
vendor: VENDOR_LIBS
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash:8].js',
publicPath: '/'
},
resolve: {
extensions: ['.json', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.html$/,
exclude: /node_modules/,
use: {
loader: 'raw-loader'
}
},
{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
loader: 'babel-loader',
options: {
babelrc: false,
presets: ["env", "stage-2", "react"],
plugins: ["transform-object-rest-spread", "transform-class-properties", "syntax-dynamic-import"]
}
},
{
test: /\.ts$/,
exclude: [
"node_modules",
"./src/**/*.spec.ts"
],
use: 'ts-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: 'file-loader'
}
]
},
devServer: {
contentBase: BUILD_PATH,
port: 9000,
compress: true,
disableHostCheck: false,
open: true,
hot: true
},
plugins: [
new htmlWebpackPlugin({
template: 'src/index.html'
}),
/*new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),*/
new webpack.optimize.SplitChunksPlugin({
names: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core/,
path.resolve(__dirname, '../src')
)
],
cache: true
};
module.exports = config;
webpack.prod.config.js
var config = {
devtool: 'cheap-module-source-map',
output: {
filename: '[name].[chunkhash:8].js',
},
plugins: [
new htmlWebpackPlugin({
title: 'My Demo App',
filename: 'index.html',
template: 'src/index.html',
}),
new webpack.optimize.UglifyJsPlugin()
]
};
module.exports = config;