1、vue项目webpack设置js脚本和css文件不插入(inject: false)
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports={
....,
configureWebpack: config => {
config.plugins.forEach((val) => {
if (val instanceof HtmlWebPackPlugin) {
val.userOptions.inject = false;
}
})
},
...,
}
2、展示loading或者假的内容页面
主要是告诉用户,已经进入我们的页面了,给用户一个反馈;
3、获取js脚本和css文件列表,插入到文件中
在index.html页面
// 插入css文件
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
// 插入js文件
var isApple = /iphone|ipad|ios|mac/gi.test(navigator.userAgent);
var htmlWebpackPluginFiles = <%= JSON.stringify(htmlWebpackPlugin.files) %>;
var appendList = [];
var bodyDom = document.getElementsByTagName('body')[0]
function createTag (source) {
return source.map(function(item) {
var temp = document.createElement('script');
temp.src = item;
temp.crossorigin = '';
return temp;
})
}
appendList = createTag(htmlWebpackPluginFiles.js)
function appendSource() {
appendList.forEach(function (item) {
bodyDom.appendChild(item);
})
}
if (isApple) {
requestAnimationFrame(appendSource)
} else {
appendSource();
}