load-chunk-style-next-to-tag-webpack-plugin
v1.0.2
Published
Make sure chunk style is load next to your main css file, avoid affecting style priority.
Downloads
5
Readme
<html>
<head>
<link href="/path/to/your/main.css" />
<!-- make sure chunk style is load next to your main css file -->
<link href="/path/to/your/chunk-1.css" load-chunk-style-next-to-tag="group" />
<link href="/path/to/your/chunk-2.css" load-chunk-style-next-to-tag="group" />
<!-- avoid affecting style priority -->
<link href="/path/to/your/other.css" />
</head>
</html> npm i --save-dev load-chunk-style-next-to-tag-webpack-plugin yarn add --dev load-chunk-style-next-to-tag-webpack-pluginThis is a webpack plugin that make sure chunk style is load next to your main css file, avoid affecting style priority.
Just add the plugin to your webpack config as follows:
webpack.config.js
const LoadChunkStyleNextToTagWebpackPlugin = require('load-chunk-style-next-to-tag-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new LoadChunkStyleNextToTagWebpackPlugin({
group: 'abc',
tag: 'link[href*=abc]'
})
]
}Webpack chain config:
module.exports = ({ context, onGetWebpackConfig }) => {
onGetWebpackConfig((config) => {
config.plugin('load-chunk-style-next-to').use(LoadChunkStyleNextToTagWebpackPlugin, [{
group: 'abc',
tag: 'link[href*=abc]',
}]);
});
};Allowed values are as follows:
| Name | Type | Default | Description |
|:-----------:|:--------------------:|:----------:|:--------------------------------------------------------------------------------------------------------------------------------|
| group | {String} || Grouping in multiple configurations on the same page. |
| **`tag`** | `{String\|String[]}` || The html tag css selector that need load style next to. If more than one is provided, the first found element takes precedence. |