Html-webpack-combo-plugin NPM

html-webpack-combo-plugin

combo js css in htmls of 'html webpack plugin' creation

Installation

npm install  html-webpack-combo-plugin --save-dev

Usage

Require the plugin in your webpack config:

var ComboPlugin = require('html-webpack-combo-plugin');

Add the plugin to your webpack config as follows:

plugins: [
  new ComboPlugin({
      baseUri: `http://test.domain.com/??`,
      splitter: ',',
      replaceCssDomain: `test.domain.com`,
      replaceScriptDomain: `test.domain.com`
  })
]

Configuration

baseUri:(required) the result domain for combo script or link domain
splitter:(default , ) splitter split every combo file
replaceCssDomain:(required) replaceCssDomain is need to replace css domain
replaceScriptDomain:(required) replaceCssDomain is need to replace js domain

demo

before

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>demo</title>
    <script src="http://test.domain.com/base.min.js" data-ignore="true"></script>
    <link rel="stylesheet" href="http://test.domain.com/css/common.css" />
    <link rel="stylesheet" href="http://test.domain.com/css/index.css" />
</head>

<body>
    <script src="http://test.domain.com/lib/es5-shim.min.js" charset="utf-8"></script>
    <script src="http://test.domain.com/lib/es5-sham.min.js" charset="utf-8"></script>
</body>

</html>

webpack.conf.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ComboPlugin = require('../../index')
module.exports = {
    entry: './example/src/index.js',
    output: {
        filename: './example/dest/index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './example/src/index.html',
            filename: './example/dest/index.html'
        }),
        new ComboPlugin({
            baseUri: `http://test.domain.com/??`,
            splitter: ',',
            replaceCssDomain: `test.domain.com`,
            replaceScriptDomain: `test.domain.com`
        })

    ]
};

after

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>demo</title>
    <script src="http://test.domain.com/base.min.js" data-ignore="true"></script>
    <link rel="stylesheet" href="http://test.domain.com/??css/common.css,css/index.css" />
    
</head>

<body>
    <script type="text/javascript" src="http://test.domain.com/??lib/es5-shim.min.js,lib/es5-sham.min.js,./example/dest/index.js"></script>
    
</body>

</html>

combo webpack html-combo js css

supermario-cli super-mario-cli @everything-registry/sub-chunk-1868 @infinitebrahmanuniverse/nolb-html-w @ly.boy/i-cli @nbsupermario/cli

4 years ago

4 years ago

7 years ago

7 years ago

7 years ago

7 years ago