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 chunck as a separeted file as mini-css-extract-plugin
or extract-text-webpack-plugin
, Webpack give us as a output a js file with some empty functions. I think that's files does'nt matter for us, so this plugin removes it. :)
Configuration:
// webpack.config.jsconst path = ;const MiniCssExtractPlugin = ;const ExcludeAssetsPlugin = ; moduleexports = entry: ... output: path: path filename: 'js/[name].js' plugins: filename: "[name].css" // path: string | [string] path: '^js\/css\/.*\.js$' '^.*(?=!(foo)).+some[cool]RegExpHere$' module: ... resolve: ... ;
Example:
// webpack.config.jsconst path = ;const MiniCssExtractPlugin = ;const ExcludeAssetsPlugin = ; moduleexports = entry: app: path "css/app": path output: path: path filename: 'js/[name].js' plugins: filename: "[name].css" path: '^js\/css\/.*\.js$' module: rules: test: /\.css$/ exclude: /node_modules/ use: MiniCssExtractPluginloader 'css-loader' resolve: extensions: '.css' ;
webpack-exclude-assets-plugin
:
Output three before using .
├── css
│ └── app.css
└── js
├── app.js
└── css
└── app.js
3 directories, 3 files
webpack-exclude-assets-plugin
:
Output file three after using .
├── css
│ └── app.css
└── js
└── app.js
2 directories, 2 files