Webpack5静态资源内联

Posted 2022-12-07 IT人.阿标

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webpack5静态资源内联相关的知识，希望对你有一定的参考价值。

文章目录

背景介绍

首先什么是静态资源内联？静态资源内联，就说将CSS，JS，图片等静态资源，内联到html。比如上一文Webpack5之px自动转换成rem提到的，页面font-size大小计算的js脚本。

我们可以通过静态资源内联来减少文件请求数量，优化加载速度。

资源内敛的意义

页面框架的初始化脚本，如rem换算等
上报相关打点
CSS 内联避免页面闪动
内联有助于减少http网络请求数，如：小图片或字体内联(url-loader)

使用步骤

插件安装

资源内联我们使用raw-loader插件
```
npm i -D raw-loader
```

内联html

新版的html-webpack-plugin解析语法使用的是<%=‘code’%>，旧版本的解析语法使用的是$‘code’

这里我们使用新版的解析语法。

新建head.html

<meta name="test" content="test content">

新建index.html，并内联引入head.html，如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <%=require('raw-loader!./head.html')%>

</head>
<body>
<div class="box">
    hello box
</div>
</body>
</html>

配置html-webpack-plugin，如下：

plugins: [
        new HtmlWebpackPlugin(
            scriptLoading: "module",
            template: path.join(__dirname, '/src/index.html'),
        ),
    ],

这样就完成了html内联工作

执行打包命令npm run build

查看index.html打包结果

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--这里我们可以看到head.html内容已经内联到了指定位置-->
    <meta name="test" content="test content">
</head>
<body>
<div class="box">hello box</div>
</body>
</html>

内联js

内联js其实更内联html是一样的，只是在编写引入脚本时候，如果需要兼容es6，需要添加babel-loader，如上一文自动将px装换成rem文中提到的，需要静态引入font-size大小计算的脚本内联：
```
    <script type="text/javascript">
        <%=require('raw-loader!babel-loader!../node_modules/lib-flexible')%>
    </script>
```
同样编译之后，就自动会将内联脚本插入到index.html文件中。

内联CSS

内联有两种方式

直接使用`style-loader`

module: 
        rules: [
            
                test: /\\.css$/,
                use: [
                    'style-loader',
                    // MiniCssExtractPlugin.loader,
                    'css-loader',
                ]
            ,
            
                test: /\\.less$/,
                use: [
                    'style-loader',
                    // MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                ]
            ,
        ]
    ,

我们之前配置的css,less的loader是MiniCssExtractPlugin.loader，现在我们将他们改为style-loader，那么下次打包会直接将css打包进js bundle内。

借助 `html-inline-css-webpack-plugin`

该方法比较常用，它会直接将css打包后内联到当前html

步骤：

安装html-inline-css-webpack-plugin插件

npm i -D html-inline-css-webpack-plugin

配置webpack.config.js

plugins: [
        new MiniCssExtractPlugin(
            filename: "[name].css",
            ignoreOrder: false,
        ),
        new HTMLInlineCSSWebpackPlugin(),
    ],

完成配置以后，再次执行npm run build，就会将css文件内联到html，如下：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="test" content="test content">
    <script type="module" src="app_d890f620.js"></script>
    <script type="module" src="search_fddd7dee.js"></script>
    <style type="text/css">
      body 
        font-size: 43px;
        color: green;
    

    .box 
        font-size: 0.44rem;
        color: red;
        border-radius: 0.2rem;
        background: aqua;
        padding-left: 0.13333333rem;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-transition: -webkit-transform 1s;
        transition: -webkit-transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
    

    </style>
</head>
<body>
<div class="box">hello box</div>
</body>
</html>

避坑指南

刚开始学习的时候，网上大部分内联html教程都是使用 $^{'} c o d e^{'} 方式，发现一直都无效。。折腾了许久，最后在 H t m l W e b p a c k P l u g i n 官网才发现，原来新版本的解析语法改成了 <$ ‘code’，这里一定要注意，它并不会报错，但是会无效。