jonny/jonnybarnes.uk
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases 5 Packages Wiki Activity Actions

refactor: Add CSS extraction for production build

Browse source 
- Add `mini-css-extract-plugin` to `devDependencies`
- Optimize production builds with `MiniCssExtractPlugin`
- Improve CSS webpack rules for production and development builds
This commit is contained in:
Jonny Barnes 2023-05-29 12:44:29 +01:00
parent cbfae0ae34
commit 447e72b16e
Signed by: jonny
SSH key fingerprint: SHA256:CTuSlns5U7qlD9jqHvtnVmfYV3Zwl2Z7WnJ4/dqOaL8
7 changed files with 82 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

74
webpack.config.js vendored
View file

@ -3,6 +3,7 @@ const StyleLintPlugin = require('stylelint-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const zlib = require('zlib');
const EslintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = {
entry: ['./resources/js/app.js'],
@ -12,29 +13,6 @@ const config = {
},
module: {
rules: [{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: process.env.NODE_ENV !== 'production'
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js'),
},
sourceMap: process.env.NODE_ENV !== 'production'
}
}
]
}, {
test: /\.js$/,
exclude: /node_modules/,
use: {
@ -74,6 +52,56 @@ const config = {
module.exports = (env, argv) => {
if (argv.mode === 'development') {
config.devtool = 'eval-source-map';
config.module.rules.push({
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js'),
},
sourceMap: true
}
}
]
});
}
if (argv.mode === 'production') {
config.module.rules.push({
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js'),
},
}
}
]
});
config.plugins.push(new MiniCssExtractPlugin({filename: 'app.css'}));
}
return config;