@25sprout/react-starter/template-simple/webpack.config.js

25sprout web starter with React

import path from 'path';
import webpack from 'webpack';
import atImport from 'postcss-import';
import cssnext from 'postcss-cssnext';
import HtmlWebpackPlugin from 'html-webpack-plugin';

import palette from './config/palette';
import media from './config/media';
import env from './config/env';

export default {
	devtool: 'cheap-module-eval-source-map',
	entry: {
		app: ['webpack-hot-middleware/client', 'react-hot-loader/patch', './src/index.js'],
		vendor: ['babel-polyfill', 'whatwg-fetch', 'react', 'react-container-helper', 'react-dom'],
	},
	output: {
		path: path.join(__dirname, '_public'),
		filename: '[name].bundle.js',
		publicPath: '',
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin(),
		new webpack.optimize.CommonsChunkPlugin({
			name: ['vendor', 'manifest'],
			minChunks: Infinity,
		}),
		new webpack.NoEmitOnErrorsPlugin(),
		new webpack.DefinePlugin({
			'process.env': env,
		}),
		new HtmlWebpackPlugin({
			template: './src/index.html',
			chunksSortMode: 'dependency',
		}),
	],
	module: {
		rules: [
			{
				test: /\.js?$/,
				include: path.join(__dirname, 'src'),
				exclude: path.join(__dirname, 'node_modules'),
				loader: 'babel-loader',
				options: {
					presets: [['es2015', { loose: true, modules: false }], 'react', 'stage-3'],
					plugins: ['react-hot-loader/babel'],
				},
			},
			{
				test: /\.css$/,
				include: path.join(__dirname, 'src'),
				use: [
					{ loader: 'style-loader', options: { sourceMap: true } },
					{
						loader: 'css-loader',
						options: {
							camelCase: true,
							modules: true,
							importLoaders: 1,
							localIdentName: '[name]__[local]___[hash:base64:5]',
							sourceMap: true,
						},
					},
					{
						loader: 'postcss-loader',
						options: {
							sourceMap: 'inline',
							plugins: () => [
								atImport(),
								cssnext({
									features: {
										customProperties: {
											variables: palette,
										},
										customMedia: {
											extensions: media,
										},
									},
								}),
							],
						},
					},
				],
			},
			{
				test: /\.css$/,
				include: path.join(__dirname, 'node_modules'),
				use: [
					{ loader: 'style-loader', options: { sourceMap: true } },
					{ loader: 'css-loader', options: { sourceMap: true } },
				],
			},
			{
				test: /\.(jpe?g|png|gif)$/,
				include: path.join(__dirname, 'src'),
				loader: 'url-loader',
				options: {
					limit: 10000,
					name: './assets/[name]__[hash].[ext]',
				},
			},
			{
				test: /\.svg$/,
				include: path.join(__dirname, 'src'),
				use: [
					'babel-loader',
					'svg-react-loader',
					{
						loader: 'svgo-loader',
						options: {
							plugins: [{ removeTitle: true }, { collapseGroups: false }],
						},
					},
					'svg-css-modules-loader',
					{
						loader: 'string-replace-loader',
						options: {
							search: '%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22',
							replace: '',
						},
					},
				],
			},
		],
	},
	node: {
		fs: 'empty',
	},
	resolve: {
		modules: ['node_modules'],
	},
};