html-webpack-plugin

npm install html-webpack-plugin -D

修改webpack.config.js的配置项，新增plugins的配置项

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...,
    plugins: [
        new HtmlWebpackPlugin()
    ],
};

执行打包命令

打包以后会默认在dist下生成index.html，并自动引入打包输出的所有资源。如果想生成src下的index.html的话可以给HtmlWebpackPlugin配置模版。

在src下新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <div id="title">
            webpack
        </div>
    </div>
</body>
</html>

修改webpack.config.js的配置

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...,
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
};

打包生成dist/index.html，会复制模版html，并自动引入所有输出的资源

我们知道浏览器在解析html的时候，是从上往下去解析的，遇到script标签后，控制权就交给了javaScript去解析，页面对DOM的渲染将会暂停，等到js执行完毕，继续去渲染DOM和CSSOM，并且js文件中经常会出现一下对dom的操作，所以我们需要一个稳定的DOM环境。所以我们需要等整个DOM tree和CSSOM完毕之后，再去交由javaScript去执行js操作，我们需要把script标签放在html的后面

修改webpack.config.js的配置, 给HtmlWebpackPlugin增加一个配置项inject

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...,
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body'， // (true || 'head' || 'body' || false)
        })
    ],
};

执行 yarn build:dev

image.png