webpack4 资源文件内联

雨点打透心脏的1/2处 2021-07-24 17:02 445阅读 0赞

减少请求和避免闪动
    
    js和html内联:一般用于移动端引入
    	在html中进行内联:
    		(1)下载
    			cnpm install -D raw-loader@0.5.1 
    				最新的版本的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(),
    		  ],