A shareable webpack configuration with sensible defaults and extensible configs for assets.
Inspired by configuration practices found on survivejs.com.
pnpm add -D webpack webpack-merge webpack-cli @ggascoigne/webpack-config
package.json
"scripts": {
"dev": "webpack --env development --config webpack.dev.js",
"build": "webpack --env production --config webpack.prod.js"
}
webpack.dev.js
const { extendWebpackBaseConfig } = require('@ggascoigne/webpack-config');
const commonConfig = require('./webpack.common.js');
const developmentConfig = {
// dev configs
};
module.exports = extendWebpackBaseConfig(commonConfig, developmentConfig);
webpack.prod.js
const { extendWebpackBaseConfig } = require('@ggascoigne/webpack-config');
const commonConfig = require('./webpack.common.js');
const productionConfig = {
// prod configs
};
module.exports = extendWebpackBaseConfig(commonConfig, productionConfig);
webpack.common.js
- Use
isProduction
to apply configs based on the environment. - Access Webpack's
env
variable. - Apply extensible base configs from
@ggascoigne/webpack-config
. - Include your own extensible configs using your own parts via
const parts = require('./webpack.parts.js');
. - Configs you set will take precedence if they overlap with
@ggascoigne/webpack-config
.
const { merge } = require('webpack-merge');
const { baseParts } = require('@ggascoigne/webpack-config');
const parts = require('./webpack.parts.js');
const commonConfig = (isProduction, env) => {
// pass `isProduction` and Webpack's `env` variable into your parts file
parts(isProduction, env);
return merge([
{
entry: {
main: './src/index.js',
},
},
baseParts.loadJS({}),
baseParts.setScriptOutputPath({}),
baseParts.loadCSS({}),
baseParts.setStyleOutputPath({}),
// custom configs from your own `parts` file
parts.loadHTMLPages({
title: 'about',
}),
]);
};
module.exports = commonConfig;
webpack.parts.js
Optionally set up your custom config parts to include in webpack.common.js
.
const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
const parts = (isProduction, env) => {
module.exports.loadHTMLPages = ({ title } = { title: 'MySite' }) => ({
plugins: [
new MiniHtmlWebpackPlugin({
context: { title },
publicPath: isProduction ? 'mydomain' : '/',
}),
],
});
};
module.exports = parts;
You can load optional configs from this package into your own:
webpack.common.js
const { baseParts } = require('@ggascoigne/webpack-config');
baseParts.loadCSS({})
baseParts.loadSCSS({})
baseParts.setStyleOutputPath({})
baseParts.loadSourceMaps({})
baseParts.loadJS({})
baseParts.loadJSX({})
baseParts.loadTS({})
baseParts.loadTSX({})
baseParts.enableTypeChecking({})
baseParts.setScriptOutputPath({})
baseParts.loadImagesAsFiles({})
baseParts.loadImagesAsFilesOrInline({})
baseParts.loadFonts({})
baseParts.loadRawAssets({})
Note: See /src/webpack.parts.js
for configuration options.
esbuild-loader
fork-ts-checker-webpack-plugin
css-loader
postcss-loader
sass-loader
style-loader
mini-css-extract-plugin.loader
source-map-loader
mini-css-extract-plugin
ESBuildMinifyPlugin
sass
typescript
webpack
webpack-merge
MIT