webpack4 处理页面

Ivanazyf

2019-09-08

关注关注

前言：

1.plugins 是webpack4 的插件集合，可以用一些插件扩展webpack4 的功能，就比如HtmlWebpackPlugin
2.HtmlWebpackPlugin的主要作用是：

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

HtmlWebpackPlugin 功能详解

一，对html文件进行加工后输出到指定目录。比如根目录的index.html 可以不用script标签引入js 文件，HtmlWebpackPlugin 可以自动将script 标签注入html 中。示例：

1.项目根目录的 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
</body>
</html>

2.webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'production',
    //入口文件
    entry: ['./src/index.js'],
    //出口
    output: {
        //文件名
        filename:'js/[name]-[hash].js',
        //路径
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        // 打包输出HTML
        new HtmlWebpackPlugin({
            //html文件的title
            title: 'Hello World app',
            // 压缩HTML文件
            minify: {
                // 移除HTML中的注释
                removeComments: true,
                // 删除空白符与换行符
                //collapseWhitespace: true,
                // 压缩内联css
                minifyCSS: true
            },
            //html输出目录默认为output设置的输出目录
            filename: 'index.html',
            //模板。默认context 上下文就是根目录，因此index.html 就是根目录的index.html
            template: 'index.html'
        }),
    ]
};

'js/[name]-[hash].js' ：将js 放入输出目录的js 文件夹中，js 名为'文件名-hash值'。
文件名name默认为main，若entry 为键值对形式，如{index:'./src/index.js'}，则name 就是'index'。

3.输出结果：

webpack4 处理页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<script type="text/javascript" src="js/main-6afcf603a71c7d11225d.js"></script></body>
</body>
</html>

二，将html 源文件变成一种模板语言，如

1.为HtmlWebpackPlugin 传入title 参数

plugins: [
    new HtmlWebpackPlugin({
        //html文件的title
        title: 'Hello World',
    }),
]

2.项目根目录的 index.html 的title 写做

<title><%=htmlWebpackPlugin.options.title%></title>

- htmlWebpackPlugin 中的所有数据都可以用 <%=htmlWebpackPlugin.***%> 的方式写到html 中

3.index.html 在输出后，就会被解析成

<title>Hello World</title>

三，对文件进行压缩

plugins: [
    // 打包输出HTML
    new HtmlWebpackPlugin({
        //html文件的title
        title: 'Hello World app',
        // 压缩HTML文件
        minify: {
            // 移除HTML中的注释
            removeComments: true,
            // 删除空白符与换行符
            collapseWhitespace: true,
            // 压缩内联css
            minifyCSS: true
        },
    }),
]

关于minify 的属性还有很多，请参考 https://www.jianshu.com/p/08a...

四，生成多页面应用

1.适用情况：有多个html，比如首页、关于我们、详情页，一个页面要对应一个js

2.示例：

指定多个入口文件，如：

entry: {
    main:'./src/index.js',
    test:'./src/example/test/test.js'
},

建立多个HtmlWebpackPlugin 对象，为其指定模板文件，输出的文件名，及其对应的js文件，如：

plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html'，
        chunks:['main']
    }),
    new HtmlWebpackPlugin({
        filename: 'test.html',
        template: './src/example/test/index.html',
        chunks:['test']
    }),
],