add miss function to webpack
JavaScript HTML CSS
Latest commit 08cd8aa Jan 9, 2017 halwu(吴浩麟) fix hot reload mutil times element miss bug

readme.md

中文文档

install

npm i web-webpack-plugin --save-dev
const WebWebpackPlugin = require('web-webpack-plugin');
const { WebPlugin, AutoWebPlugin } = WebWebpackPlugin;

output html file demo

webpack config

module.exports = {
    entry: {
        A: './a',
        B: './b',
    },
    plugins: [
        new WebPlugin({
            // file name for output file, required.
            // pay attention not to duplication of name,as is will cover other file
            filename: 'index.html',
            // this html's requires entry,must be an array.dependent resource will inject into html use the order entry in array.
            requires: ['A', 'B'],
        }),
    ]
};

will output an file named index.html,this file will auto load js file generated by webpack form entry A and B,the out html as below:

output html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<script src="A.js"></script>
<script src="B.js"></script>
</body>
</html>

output directory

├── A.js
├── B.js
└── index.html

use html template demo

webpack config

module.exports = {
    entry: {
        A: './a',
        B: './b',
    },
    plugins: [
        new WebPlugin({
            filename: 'index.html',
            // html template file path(full path relative to webpack.config.js)
            template: './template.html',
            requires: ['A', 'B'],
        }),
    ]
};

html template

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <script src="B"></script>
</head>
<body>
<!--SCRIPT-->
<footer>web-webpack-plugin</footer>
</body>
</html>
  • use <script src="B"></script> in html template to load required entry, the B in src="B" means entry name config in webpack.config.js
  • comment <!--SCRIPT--> means a inject position ,except for resource load by <script src></script> left required resource config in WebPlugin's requires option. if there has no <!--SCRIPT--> in html template left required script will be inject ad end of body tag.

output html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <script src="B.js"></script>
</head>
<body>
<script src="A.js"></script>
<footer>web-webpack-plugin</footer>
</body>
</html>

config resource attribute demo

every resource required by html,it can config some attribute as below:

  • _dist only load in production environment
  • _dev only load in dev environment
  • _inline inline resource content info html,inline script and css
  • _ie resource only required IE browser,to achieve by [if IE]>resource<![endif] comment

there has two way to config resource attribute:

config in html template

webpack config

module.exports = {
    entry: {
        'ie-polyfill': './ie-polyfill',
        inline: './inline',
        dev: './dev',
        googleAnalytics: './google-analytics',
    },
    plugins: [
        new WebPlugin({
            filename: 'index.html',
            template: './template.html'
        }),
    ]
};

html template

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <script src="inline?_inline"></script>
    <script src="ie-polyfill?_ie"></script>
</head>
<body>
<script src="dev?_dev"></script>
<script async src="googleAnalytics?_dist"></script>
</body>
</html>

output html file

config in webpack.config.js

webpack config

module.exports = {
    plugins: [
        new WebPlugin({
            filename: 'index.html',
            requires: {
                'ie-polyfill': {
                    _ie: true
                },
                'inline': {
                    _inline: true,
                    _dist: true
                },
                'dev': {
                    _dev: true
                },
                'googleAnalytics': {
                    _dist: true
                }
            }
        }),
    ]
};

output html file

auto detect html entry demo

AutoWebPlugin can find all page entry in an directory,then auto config an WebPlugin for every page to output an html file,you can use it as below:

webpack config

module.exports = {
    plugins: [
        new AutoWebPlugin(
            // the directory hold all pages
            './src/', 
            {
            // the template file path used by all pages
            template: './src/template.html',
            // javascript main file for current page,if it is null will use index.js in current page directory as main file
            entity: null,
            // extract common chunk for all pages and then put it into a file named common,if it is null then not do extract action
            // achieve by CommonsChunkPlugin
            commonsChunk: 'common',
            // pre append to all page's entry
            preEntrys:['./path/to/file1.js'],
            // post append to all page's entry
            postEntrys:['./path/to/file2.js'],
        }),
    ]
};

src directory

── src
│   ├── home
│   │   └── index.js
│   ├── ie_polyfill.js
│   ├── login
│   │   └── index.js
│   ├── polyfill.js
│   ├── signup
│   │   └── index.js
│   └── template.html

output directory

├── dist
│   ├── common.js
│   ├── home.html
│   ├── home.js
│   ├── ie_polyfill.js
│   ├── login.html
│   ├── login.js
│   ├── polyfill.js
│   ├── signup.html
│   └── signup.js

AutoWebPlugin find all page home login signup directory in ./src/,for this three page home login signup will use index.js as main file and output three html file home.html login.html signup.html`

template attribute

template if template is a string , i will regard it as file path for html template(full path relative to webpack.config.js) In the complex case,You can set the template to a function, as follows using the current page directory index.html file as the current page template file

webpack config

const path = require('path');
module.exports = {
    plugins: [
        new AutoWebPlugin('./src/', {
            // Template files used by all pages
            template: (pageName) => {
                return path.resolve('./src',pageName,'index.html');
            },
        }),
    ]
};

entity attribute

The entity property is similar to template, and also supports callback functions for complex situations. But if the entity is empty to use the current page directory index.jsx? As the entrance

config publicPath demo

load css demo

The resource for each entity may contain css code. If you want to extract the css code to load alone rather than sneaking into the js where you need to load extract-text-webpack-plugin Separated css code, the rest of the things to me, I will automatically deal with the same as the above js css

webpack config

// webpack.config.js
module.exports = {
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: 'css-loader'
                })
            }
        ]
    },
    entry: {
        1: './1',
        2: './2',
        3: './3',
        4: './4',
    },
    plugins: [
        new ExtractTextPlugin('[name].css'),
        new WebPlugin({
            filename: 'index.html',
            template: './template.html',
            requires: ['1', '2', '3', '4']
        }),
    ]
};

html template

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="1">
    <link rel="stylesheet" href="2?_inline">
    <link rel="stylesheet" href="3?_ie">
    <script src="1"></script>
    <!--STYLE-->
</head>
<body>
<script src="2"></script>
<!--SCRIPT-->
<footer>footer</footer>
</body>
</html>

output html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="1.css">
    <style>
    /**2.css**/
    body {
        background-color: rebeccapurple;
    }</style>
    <!--[if IE]>
    <link rel="stylesheet" href="3.css">
    <![endif]-->
    <script src="1.js"></script>
    <link rel="stylesheet" href="4.css">
</head>
<body>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<footer>footer</footer>
</body>
</html>

output directory

├── 1.css
├── 1.js
├── 2.css
├── 2.js
├── 3.css
├── 3.js
├── 4.css
├── 4.js
└── index.html

Distinguish the environment

This plug-in takes into account both development environment and production environment. And only if process.env.NODE_ENV = production current environment is production environment, others are considered to be development environment. webpack -p will use DefinePlugin define NODE_ENV=production

  • in development environment, webpack-dev-server/client and webpack/hot/dev-server will be load

Version of the supported node.js

This plugin uses a lot of es6 syntax, support the latest node.js LTS version