https://github.com/klaytonfaria/webpack-exclude-assets-plugin
Webpack plugin to exclude assets from webpack output based on a path RegExp pattern.
https://github.com/klaytonfaria/webpack-exclude-assets-plugin
assets chuncks exclude name path plugin webpack webpack-plugin webpack4
Last synced: about 1 year ago
JSON representation
Webpack plugin to exclude assets from webpack output based on a path RegExp pattern.
- Host: GitHub
- URL: https://github.com/klaytonfaria/webpack-exclude-assets-plugin
- Owner: klaytonfaria
- License: mit
- Created: 2018-08-24T01:59:02.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-03T14:23:48.000Z (over 7 years ago)
- Last Synced: 2025-04-12T13:09:58.316Z (about 1 year ago)
- Topics: assets, chuncks, exclude, name, path, plugin, webpack, webpack-plugin, webpack4
- Language: JavaScript
- Size: 63.5 KB
- Stars: 5
- Watchers: 0
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
Webpack exclude assets plugin 
===
[](https://nodei.co/npm/webpack-exclude-assets-plugin/)
Webpack plugin to exclude assets from webpack output based on a path RegExp pattern.
## Why?
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`](https://github.com/webpack-contrib/mini-css-extract-plugin) or [`extract-text-webpack-plugin`](https://github.com/webpack-contrib/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. :)
## Configuration:
```js
// 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: { ... }
};
```
## Example:
```js
// 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']
}
};
```
### Output tree **before** using `webpack-exclude-assets-plugin`:
```
.
├── css
│ └── app.css
└── js
├── app.js
└── css
└── app.js
3 directories, 3 files
```
### Output file tree **after** using `webpack-exclude-assets-plugin`:
```
.
├── css
│ └── app.css
└── js
└── app.js
2 directories, 2 files
```
## License
#### [MIT](./LICENSE)