webpack4 处理页面

前言：

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.输出结果：

<!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']
    }),
],

chunks：指定一个html 文件要包含js 文件

五，其它常用功能

1.inject：js 在html 中的注入位置

true：默认值，script标签位于html文件的 body 底部
body：script标签位于html文件的 body 底部（同 true）
head：script 标签位于 head 标签内
false：不插入生成的 js 文件，只是单纯的生成一个 html 文件（这个几乎不会用到的）

2.favicon：给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名

3.hash：每次编译时，给生成的 js 文件一个不同hash 值，用于解决js 缓存问题。默认值为 false 。如：

4.cache：在编译时，基于发生改变的文件，生成一个新文件，默认是true的

参考网址： https://www.jianshu.com/p/08a...

webpack4 处理页面

前言：

HtmlWebpackPlugin 功能详解

已注销

引用和评论

echarts用两个y轴显示两组有正负数的数据