Skip to content

Instantly share code, notes, and snippets.

@dsadhanala
Last active March 20, 2018 03:49
Show Gist options
  • Save dsadhanala/8f19b62916cf5b5b27124c8d2d57493f to your computer and use it in GitHub Desktop.
Save dsadhanala/8f19b62916cf5b5b27124c8d2d57493f to your computer and use it in GitHub Desktop.
webpack 4.x chunks config
const path = require('path');
const lodash = require('lodash');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const pkg = require(path.join(process.cwd(), 'package.json'));
const ENV = process.env.NODE_ENV || 'development';
const isProd = (ENV === 'production');
module.exports = {
devtool: 'cheap-module-source-map',
mode: ENV,
entry: {
[`${pkg.name}`]: 'src/index.js'
},
optimization: {
minimize: true,
runtimeChunk: {
name: '01-runtime-chunk'
},
splitChunks: {
cacheGroups: {
common: {
test: /(node_modules)\//,
chunks: 'initial',
name: "02-common-chunk",
enforce: true
}
},
}
},
output: {
filename: '[name].js',
library: lodash.camelCase(pkg.name),
libraryTarget: 'umd',
umdNamedDefine: true
},
devServer: {
host: '0.0.0.0',
port: 1818,
hot: true,
quiet: true,
historyApiFallback: true,
contentBase: './'
},
module: {
rules: [{
test: /\.(js|jsx)$/,
use: [{
loader: 'babel-loader'
}]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: './postcss.config.js'
},
sourceMap: true
}
}
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(ENV)
})
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment