Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample Webpack Config
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const resolve = require("path").resolve;
module.exports = {
mode: "development",
entry: resolve(__dirname, 'app/index.js'),
output: {
path: resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
publicPath: "/",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: [
{
loader: 'babel-loader',
query: {
presets: [
["@babel/preset-env", {
useBuiltIns: 'entry',
corejs: '3',
targets: "> 1%, not dead"
}],
["@babel/preset-react"]
]
}
}
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}, {
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
]
},
plugins: [
new webpack.HashedModuleIdsPlugin(),
new HtmlWebpackPlugin({
template: './app/index.html'
}),
new MiniCssExtractPlugin({ filename: '[contenthash].css' })
//new BundleAnalyzerPlugin()
],
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`;
},
},
},
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment