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"
    	],
    ],
  }
};

這里寫了好半天並沒有成功 ， 蛋疼。。。