欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack4 资源文件内联

程序员文章站 2022-05-30 21:21:11
...
减少请求和避免闪动

js和html内联:一般用于移动端引入
	在html中进行内联:
		(1)下载
			cnpm install -D [email protected] 
				最新的版本的raw-loader使用了导出模块的时候使用了export default语法,html 里面用的话有问题。
		(2)使用
			html:
				<%= require('raw-loader!文件路径') %>
					如:<%= require('raw-loader!./meta.html') %>
					
			js:内联时还需要添加babel-loader解析es6语法
				<%= require('raw-loader!babel-loader!文件路径') %>
					如:<script><%= require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js') %></script>
				编译器会报错,但不会影响结果
				
	在js文件中内联
		(1)配置
		  {
	        use: [
	          {
	            loader: 'raw-loader',
	            options: {
	              esModule: false,
	            },
	          },
	        ],
	      }
	   (2)使用
	   	import xx from 'raw-loader!文件路径';
	   	如果已经配置了后缀加载器:
	   		import xx from '!!raw-loader!文件路径';
	
css内联:
	方式一:使用style-loader
		style-loader是css-in-js需要加载js后才能写入到style中,有一定的延迟性
		html-inline-css-webpack-plugin是将css提取出来,再写入到html中,html网页源代码中已经内联好css了,没有延迟性了
		
	方式二:使用html-inline-css-webpack-plugin
		使用前奏:
			首先使用mini-css-extract-plugin将css提取打包成一个独立的css chunk文件。
			然后使用html-inline-css-webpack-plugin读取打包好的css chunk内容注入到页面
			原本引入css资源地址,现在实现了css内联
		(1)下载
			cnpm i -D html-inline-css-webpack-plugin
			
		(2)配置
			const HTMLInlineCSSWebpackPlugin = require ( "html-inline-css-webpack-plugin" ). default ;
			plugins: [
			    new HTMLInlineCSSWebpackPlugin(),
		    ]
		(1)下载
			cnpm i html-inline-css-webpack-plugin -D
			
		(2)配置
		  const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
		  
		  plugins: [
		    new HTMLInlineCSSWebpackPlugin(),
		  ],
相关标签: webpack webpack4