webpack 资源内联

资源内联

webpack 也太迷了

把字体、图片等资源内联到代码里面去

上报相关的一些点，比如 pagestart、css 初始化、css 初始化完成、js初始化、js 初始化完成。

这些都一般内联到 html 里面去，而不是单个文件上报

资源内联的意义

• 代码层面：
  • 页面框架的初始化脚本
  • 上报相关打点
  • css 内联避免页面内抖动
• 请求层面
  • 小图片或者字体内联（url-loader)
  • 减少 HTTP 网络请求数

HTML 和 JS 的内联

npm install raw-loader@0.5.1 -D

raw-loader 内联 html

<script>${require('raw-loader!babel-loader!./meta.html')}</script>

raw-loader 内联 JS

<script>${require('raw-loader!babel-loader!../node_modules/lib-flexible')}</script>

CSS 的内联

方案一：借助 style-loader

设置一个参数

方案二：借助 html-inline-css-webpack-plugin

这种用的更广泛

打包好的 css chunk 代码 内联到 html 的 head 与 head 之间

module.exports = {
  module: {
    rules: [
      test: /.scss$/,
      use: [
      	{
      		loader: 'style-loader',
     			options: {
      			insertAt: 'top', // 样式插入到 head
      			singleton: 'true', // 将所有的 style标签都合成一个
      		}
      	},
  			"css-loader",
  			"sass-loader"
    	],
    ],
  }
};

这里写了好半天并没有成功 ， 蛋疼。。。