webapck5 学习9 -- 静态资源文件内联假如我们有两个个需求将我们提取出来的页面公共头部信息内联加载到页面模

假如我们有两个个需求

将我们提取出来的页面公共头部信息内联加载到页面模板中
将我们需要在页面一开始就需要加载 js 脚本内联到页面模板中

webpack 4 中

在 webpack4 中，你可以使用内联语法

require(raw-loader!header.html)
require(raw-loader!babel-loader!my-module.js)

然后利用 html-webpack-plugin 模板提供的模板语法, 加载到 html 中

<!DOCTYPE html>
<html lang="en">
<head>
    <%= require(raw-loader!header.html) %>
    <title>Document</title>
    <script>
    // babel-loader 是为了处理脚本中的 es6 类的写法j
      <%= require(raw-loader!babel-loader!my-module.js) %>
    </script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

webpack5 中

在 webpack5 中, 新增了 assets module (资源模块) 来处理资源类的事情, 建议去掉所有的内联 loader 的语法，使用资源查询条件来模仿内联语法的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <%= require(header.html?raw) %>  // 通过 ?raw 参数来匹配
    <title>Document</title>
    <script>
      <%= require(my-module.js?raw) %>
    </script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

在 webpack 配置文件中

module: {
    rules: [
    // 这里有多个， 所以使用 oneOf 的规则列表，此处每个文件只会匹配一个规则
      { oneOf: [
                {
                  resourceQuery: /raw/,
                  type: 'asset/source',
                },
               {
                 test: /\.js\?raw$/,
                 use: [ 'raw-loader', 'babel-loader' ]
               },
             ] }
    ]
}