Webpack打包时将文件内联方法实现

在编写前端代码时,有些文件作为单独的文件引用会更便于维护,但是有些文件却必须要内联。

文件内联的场景如下:

1. 页面加载时需要初始化的代码需要内联;

2. 一些上报与回传的打点的代码需要内联;

3. 为了避免页页闪动,首屏渲染的CSS代码需要内联;

4. 减少HTTP的网络请求次数,将小图片或字体文件直接内联;

在Webpack中内联html和javaScript代码可以通过raw-loader这个插件来完成

3. 利用插件内联HTML片段与JS插件

<!DOCTYPE html>
<html >
<head>
    <!-- 引入meta.html片段-->
    ${ require('raw-loader!./meta.html')}
    <title>Webpack内联文件</title>
    <!-- 将外部JS插件进行内联 -->
    <script>
        ${ require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js')}
    </script>
</head>
<body>
    <div ></div>
</body>
</html>

原文地址:https://aiguangyuan.blog.csdn.net/article/details/128604173