Webpack ~ Final - rohit120582sharma/Documentation GitHub Wiki

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;