# 使用 webpack 配置静态资源内联

# 资源内联的意义

代码层面：

• 页面框架的初始化脚本；

• 上报相关打点；

• css 内联避免页面闪动；

请求层面：减少 http 网络请求数：

• 小图片或字体内联（url-loader）；

# html 和 js 内联

• 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/flexible.js')}</script>
  

# css 内联

• 方案一：style-loader

  具体配置如下：

  module.exports = {
  	...
  	module: {
  		rules: [
  			test: /\.less$/,
  			use: [
  				{
  					loader: 'style-loader',
  					options: {
  						/* 样式插入到 head 中 */
  						insertAt: 'top';
  						/* 将所有的 style 标签合并为一个 */
  						singleton: true
  					}
  				}
  				'css-loader',
  				'less-loader',
  			]
  		]
  	}
  }
  

• 方案二：html-inline-css-webpack-plugin

  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
  
  module.exports = {
  	plugins: [
  		new MiniCssExtractPlugin({
  			filename: "[name].css",
  			chunkFilename: "[id].css"
  		}),
  		new HtmlWebpackPlugin(),
  		new HTMLInlineCSSWebpackPlugin(),
  	],
  	module: {
  		rules: [
  			{
  				test: /\.css$/,
  				use: [
  					MiniCssExtractPlugin.loader,
  					"css-loader"
  				]
  			}
  		]
  	}
  }