entry-chunk-webpack-plugin
v3.0.0
Published
A webpack plugin that splits one entry file into multiple files and add them to entry of webpack.
Downloads
6
Readme
entry-chunk-webpack-plugin
A webpack plugin that splits one entry file into multiple files and add them to entry of webpack.
Install
npm i -D entry-chunk-webpack-plugin
Usage
In your webpack configuration (webpack.config.js
):
const EntryChunkWebpackPlugin = require('entry-chunk-webpack-plugin');
const LibraryExtendWebpackPlugin = require('library-extend-webpack-plugin');
module.exports = {
mode: "production",
entry: {
example: './src/index.ts',
},
output: {
library: "LIB",
libraryTarget: "umd",
filename: '[name].js'
},
//...
plugins: [
new EntryChunkWebpackPlugin({
chunkConfig: [{
name: 'example.base',
}, {
name: 'example.extend',
modules: ['RichEditor', 'ReactCropper']
}],
}),
new LibraryExtendWebpackPlugin({
exclude: function (fileName) {
return !/\.[tj]s$/i.test(fileName) || /example(\.base)*(\.min)*\.js/.test(fileName);
}
}),
]
}
Entry File: index.ts
export { default as Avatar } from './components/avatar/index';
export { default as Button } from './components/button/button';
export { default as RichEditor } from './components/rich-editor/index';
export { default as ReactCropper } from './components/react-cropper/index';
Output Bundle
It will output 3 files
example.js ({ Avatar, Button, RichEditor, ReactCropper })
example.base.js ({ Avatar, Button })
example.extend.js ({ RichEditor, ReactCropper })
Avatar
and Button
will be packaged to example.base.js
.RichEditor
and ReactCropper
will be packaged to example.extend.js
.
Function Avatar
, Button
, RichEditor
and ReactCropper
are added to global library LIB
.
And LIB.Avatar
, LIB.Button
, LIB.RichEditor
and LIB.ReactCropper
work well.
Options
mode
Its value can be 'add'
or 'replace'
or ''
. The default value is add
.
'add'
: means will add chunk file to entry.'replace'
: means will remove original entry file, and add chunk file to entry.''
: means will not add chunk file to entry.
min
Its value must be boolean or 'both'
. The default value is false
.
true
: it will add [name].min.js
to entry.false
: it will add [name].js
to entry.'both'
: it will both add [name].js
and [name].min.js
to entry.
chunkConfig
Its value must be Array. You need to config it to split entry file into multiple files as example.
exclude
You can skip entry file by exclude
: ({name, path}) => boolean
Example of usage on the Browser
In the browser:
<script src="https://cdn.xx.com/example.base.js"></script>
<script src="https://cdn.xx.com/example.extend.js"></script>
If you do not use the module (RichEditor
and ReactCropper
) in example.extend.js
, you can only add example.base.js
to html.
Because in the example, library-extend-webpack-plugin is used to package example.extend.js
into an extension library.
<script src="https://cdn.xx.com/example.base.js"></script>