Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
sample webpack config
import path from 'path';
import webpack from 'webpack';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
const isDev = !(process.env.NODE_ENV === 'production');
const analyze = process.argv.includes('--analyze');
const useMocks = process.argv.includes('--mock');
const config = {
cache: isDev,
context: path.resolve(__dirname),
devtool: isDev ? 'cheap-module-inline-source-map' : 'source-map',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: isDev ? '[name].js' : '[name].[chunkhash:8].js'
},
entry: [
'babel-polyfill',
...isDev ? [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
] : [],
'./src/index.js',
],
name: 'client',
module: {
// makes missing exports an error instead of a warning
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx)$/,
include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'utils')],
loader: 'babel-loader',
options: {
// https://github.com/babel/babel-loader#options
cacheDirectory: isDev,
babelrc: false,
presets: [
'es2015',
'stage-2',
// https://github.com/babel/babel/tree/master/packages/babel-preset-react
'react'
],
plugins: [
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-constant-elements
...(isDev ? ['transform-react-constant-elements'] : []),
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements
...(isDev ? ['transform-react-inline-elements'] : []),
// https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types
...(isDev ? ['transform-react-remove-prop-types'] : []),
]
}
},
{
test: /\.css?$/,
rules: [
{
loader: 'style-loader'
},
{
// process external stylesheets
exclude: path.resolve(__dirname, 'src'),
loader: 'css-loader',
options: {
sourceMap: isDev,
minimize: isDev ? false : { discardComments: { removeAll: true } }
}
},
{
include: path.resolve(__dirname, 'src'),
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: isDev,
localIdentName: isDev ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
minimize: isDev ? false : { discardComments: { removeAll: true } }
}
}
]
},
{
test: /\.less?$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': isDev ? '"development"' : '"production"',
'process.env.BROWSER': true,
__DEV__: true,
__MOCK__: useMocks ? true : false
}),
...analyze ? [new BundleAnalyzerPlugin()] : [],
...(isDev
? [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
]
: [
new webpack.optimize.ModuleConcatenationPlugin(),
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
}
}),
]
)
],
resolve: {
modules: ['node_modules', 'src', path.resolve(__dirname)]
},
target: 'web',
}
export default config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment