Webpack plugin to exclude assets from webpack output based on a path RegExp pattern.
When we have css, scss, sss, stylus or some style file as an entry, for example, using some plugin to extract chunk as a separated file as mini-css-extract-plugin
or extract-text-webpack-plugin
, Webpack give us as an output a js file with some empty functions. I think that's files doesn't matter for us, so this plugin removes it. :)
// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ExcludeAssetsPlugin = require("webpack-exclude-assets-plugin");
module.exports = {
entry: { ... },
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/[name].js'
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
}),
new ExcludeAssetsPlugin({
// path: string | [string]
path: [
'^js\/css\/.*\.js$',
'^.*(?=!(foo)).+some[cool]RegExpHere$'
]
})
],
module: { ... },
resolve: { ... }
};
// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ExcludeAssetsPlugin = require("webpack-exclude-assets-plugin");
module.exports = {
entry: {
app: path.resolve(__dirname, 'js/app.js'),
"css/app": path.resolve(__dirname, 'css/app.css')
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/[name].js'
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
}),
new ExcludeAssetsPlugin({
path: ['^js\/css\/.*\.js$']
})
],
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
]
}
]
},
resolve: {
extensions: ['.css']
}
};
.
├── css
│ └── app.css
└── js
├── app.js
└── css
└── app.js
3 directories, 3 files
.
├── css
│ └── app.css
└── js
└── app.js
2 directories, 2 files