HTML的处理和打包 - 《网易微专业学习笔记》

需要用到的plugin：
npm install html-webpack-plugin —save-dev

index.html 模板：

可以注意到html文件中没有css和js的引入。

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

config文件：

基于上节学习中的文件。

plugins: [
        new extractTextCss({
            filename: '[name].min.css'
        }),
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html'
        })
    ]

可以看到打包后的结果，已经生成了一个index.html，并且css和js已经被正确的引入。之前我们都是手动引入，如果css或js文件名中包含hash，我们就不知道具体的hash是什么了，就需要用htmlplugin去帮我们自动引入。

修改config文件增加minify和inject：
minify表示是否压缩html，inject表示是否自动插入css和js的引用。

plugins: [
        new extractTextCss({
            filename: '[name].min.css'
        }),
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            minify:{
                collapseWhitespace:true
            },
            inject: true
        })
    ]

chunks：

针对多入口打包，想要只引入某一个入口打包出来的资源（css，或js）。如下，指定了app，则只会引入app打包入口的资源。

plugins: [
        new extractTextCss({
            filename: '[name].min.css'
        }),
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            minify:{
                collapseWhitespace:true
            },
            inject: true,
            chunks: ['app']
        })
    ]