Load-chunk-style-next-to-tag-webpack-plugin NPM

npm

<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-plugin

This 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.

webpack plugin chunk style tag

@everything-registry/sub-chunk-2091

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago