Nerdiest Political Manifesto
    Have ideas to improve npm?Join in the discussion! »


    1.0.1 • Public • Published


    Enhances html-webpack-plugin functionality by changing the default inject assets method to dynamically inject css style assets.

    webpack-rtl-plugin is plugin to use to create a second css bundle, processed to be rtl, rtl css bundle default filename is xxx.rtl.css. When html-webpack-plugin will generate an HTML5 file, they are all included with tags in the HTML head by default.

    It is expected that the corresponding styles can be loaded according to the language type, instead of all styles being injected into index.html by default.This plugin is used to help us complete this work. It uses cookies to determine the language type, and then decides which style to load.


    You must be running webpack on Node v4.0.0 or higher.

    Install the plugin with npm:

    $ npm install --save-dev html-webpack-inject-style-plugin


    Require the plugin in your webpack config, and add the plugin to your webpack config as follows:

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const WebpackRTLPlugin = require('webpack-rtl-plugin');
    const HtmlWebpackInjectStylePlugin = require('html-webpack-inject-style-plugin');
    module.exports ={
      entry: './entry.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
      module: {
        rules: [
            test: /\.css$/,
            use: [
      plugins: [
        new MiniCssExtractPlugin({
          filename: 'style.css'
        new WebpackRTLPlugin(),
        new HtmlWebpackPlugin(),
        new HtmlWebpackInjectStylePlugin({
          // isRtl: /lang_type=ar/ // is a RegExp
          isRtl: function () {  // is a Function
            return true

    The above configuration will inject a script in the head, When the page is parsed, execute to determine whether the current language is an RTL language, such as Arabic. If it is RTL language, inject xxx.rtl.css style otherwise inject xxx.css style.

        <meta charset="UTF-8">
        <title>Webpack App</title>
        <link href="style.css" rel="stylesheet">
        <link href="style.rtl.css" rel="stylesheet">
        <script type="text/javascript" src="main.js"></script>

    The above is the index.html file generated by default, it will be processed into the following

        <meta charset="UTF-8">
        <title>Webpack App</title>
        <script type="text/javascript">
          (function () {
            // if `isRTL` is a RegExp
            // var isRTL = new Function("return /lang_type=ar/.test(document.cookie)");
            // if `isRTL` is a Function
            var isRTL = new Function("return (function isRtl () {\n      return true;\n    })(window)");
            var head = document.querySelector('head');
            ["style"].forEach(function (href) {
              var fullhref = isRTL() ? href + '.rtl.css' : href + '.css';
              var linkTag = document.createElement("link");
              linkTag.rel = "stylesheet";
              linkTag.type = "text/css";
              linkTag.href = fullhref;
        <script type="text/javascript" src="main.js"></script>


    Name Type Default required Description
    isRtl {RegExp|Function} / true The regexp to use to process cookies to determine whether the current page is in RTL language, and you can also set it as a function, if the execution result of the function is true, it is a RTL language.


    npm i html-webpack-inject-style-plugin

    DownloadsWeekly Downloads






    Unpacked Size

    18.1 kB

    Total Files


    Last publish


    • avatar