Webpack：资源内联的方式

资源内联的意义

代码层面

由于大部分都是做的单页面应用，资源内联作为页面框架的初始化脚本。
多页面中通用的埋点代码，可以进行资源内联。
css内联避免页面出现闪动现象

请求层面

内联代码可以减少HTTP请求数

内联方案

raw-loader

由于html-webpack-plugin指定的template可以使用ejs的语法编译，所以可以结合raw-loader使用内联loader的方式将外部代码内联进来

内联HTML

如果我们的一个html文件中引入了很多的meta标签信息，以及多个cdn链接，可以采取将meta信息和cdn链接分别抽离成meta.html和cdn.html，在index.html中使用raw-loader将这两个html内联进来。如果项目是多页的话，更新变化只需要更新这两个html文件即可。

<!-- meta.html-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<!-- cdn.html-->
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>

在index.html中引入

<!DOCTYPE html>
<html lang="en">
  <head>
    ${ require('raw-loader!./meta.html')}
    <title>Document</title>
    ${ require('raw-loader!./cdn.html')}
  </head>
  <!-- dsfsdfsdfss -->
  <body></body>
</html>

内联JavaScript

raw-loader也可以内联js代码，例如内联一个第三方公共包

<!DOCTYPE html>
<html lang="en">
  <head>
    ${ require('raw-loader!./meta.html')}
    <title>Document</title>
    ${ require('raw-loader!./cdn.html')}
    <script>${require('raw-loader!babel-loader!../node_nodules/lodash/index.js')}</script>
  </head>
  <!-- dsfsdfsdfss -->
  <body></body>
</html>

上面以lodash做一个例子，这样就可以把js代码内联进来了。

CSS文件的内联

直接使用style-loader将特定的css文件内联进去。
使用html-inline-css-webpack-plugin将打包好的css文件插入到html代码的head标签内。

yarn add html-inline-css-webpack-plugin -D

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new HtmlWebpackPlugin(),
    new HTMLInlineCSSWebpackPlugin({
          filter(fileName) {
                return fileName.includes('main');
          },
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
}

内联JavaScript chunk

将打包好的js代码内联进html，目前市面上的这种插件有一些缺陷：1、效果不明显；2、信任度不高。所以可以自研插件，其原理就是挂载html-webpack-plugin中提供给我们使用的钩子，得到html文件对应注入的chunk，找到特定chunk将其内容注入到html中就可以了。

hubvue / webpack-learn

Webpack：资源内联的方式 #4