A webpack plugin to merge different files outputted from extract-text-webpack-plugin
npm install file-merge-webpack-pluginFile Merge Webpack Plugin
==========================
A fork of merge-files-webpack-plugin
Differences:
* Supports use of [hash], [contenthash] in the filename
* Orders assets by chunk order before merge
* deleteSourceFiles accepts a RegExp, to allow a subset of files to be deleted
* Includes the file in the compilation stats (supports assets-webpack-plugin, should support others too)
===
This is a small plugin created to merge files extracted by
the extract-text-webpack-plugin into a single one.
It is useful, for example, when you have multiple entries
in your webpack configuration and you use the extract-text-webpack-plugin
plugin to extract all the .css files into a separate one. Without this plugin,
extract-text-webpack-plugin will extract a .css file per entry (if you use
have set the filename as [name].css) or in the worst case a single file with only
the .css file of the last entry (if you have set the filename as style.css).
With this plugin, you can extract all the .css files from all entries
into a single .css file.
Install:
npm install file-merge-webpack-plugin --save-dev
You need to use webpack 2+ and extract-text-webpack-plugin 2+.
The filename for the extract-text-webpack-plugin has to use [name].something.ext
where something.ext is the name that will be used in the test option of this plugin.
A sample file would be:
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var MergeFilesPlugin = require('merge-files-webpack-plugin');
module.exports = {
entry: {
'entry1': './tests/test1/src/entry1/index.js',
'entry2': './tests/test1/src/entry2/index.js'
},
output: {
path: path.join(__dirname, './tests/test1/public'),
filename: '[name].js'
},
module: {
rules: [
{
use: ExtractTextPlugin.extract({
use: 'css-loader'
}),
test: /\.css$/,
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin({
filename: '[name].style.css'
}),
new MergeFilesPlugin({
filename: 'css/style.css',
test: /style\.css/, // it could also be a string
deleteSourceFiles: true
})
]
}
The config object passed to MergeFilesPlugin admits:
+ filename: Final name of the file created by merging the files. The file will be saved in the output path. You can add extra path in front of the filename. Required. String.
+ test: Test applied to the different files created by webpack to see which should be merged. For the previous example, the files created by webpack with ExtractTextPlugin will be entry1.js, entry1.style.css, entry2.js and entry2.style.css. We are interested in entry1.style.css and entry2.style.css that are created by the ExtractTextPlugin plugin. As such, a good test will be style.css or /\.css/ if you want to use RegExp. Optional. If it is not specified, filename is used.
+ deleteSourceFiles: If true, entry1.style.css and entry2.style.css will be deleted. If false, they will be created. If not specified, by default is setted to true.