87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
const cdnDependencies = require("./dependencies-cdn");
|
||
|
||
// 引入文件的 cdn 链接
|
||
const cdn = {
|
||
css: cdnDependencies.map((e) => e.css).filter((e) => e),
|
||
js: cdnDependencies.map((e) => e.js).filter((e) => e),
|
||
};
|
||
|
||
class BuildAppJSPlugin {
|
||
apply(compiler) {
|
||
// emit 是异步 hook，使用 tapAsync 触及它，还可以使用 tapPromise/tap(同步)
|
||
compiler.hooks.emit.tapAsync(
|
||
"BuildAppJSPlugin",
|
||
(compilation, callback) => {
|
||
let cssarr = [];
|
||
let jsarr = [];
|
||
// 遍历所有编译过的资源文件，
|
||
// 对于每个文件名称，都添加一行内容。
|
||
for (let filename in compilation.assets) {
|
||
if (process.env.NODE_ENV === "production") {
|
||
filename = (process.env.VUE_APP_PUBLIC_PATH || "/") + filename;
|
||
} else {
|
||
filename = "/" + filename;
|
||
}
|
||
// filename = "/" + filename;
|
||
|
||
if (filename.match(".*\\.js$")) {
|
||
jsarr.push(filename);
|
||
}
|
||
if (filename.match(".*\\.css$")) {
|
||
cssarr.push(filename);
|
||
}
|
||
}
|
||
cssarr = cssarr.sort(function(a) {
|
||
return a.indexOf("app.");
|
||
});
|
||
var cdnjs = ''
|
||
if (process.env.NODE_ENV === "production") {
|
||
cssarr = cdn.css.concat(cssarr);
|
||
cdnjs = `var cdnjs = ${JSON.stringify(cdn.js)};
|
||
cdnjs.forEach((item) => {
|
||
document.write('<script src="' + item + '"></script>');
|
||
});`
|
||
} else {
|
||
cssarr = cssarr.concat(cdnDependencies
|
||
.filter((e) => e.name === "")
|
||
.map((e) => e.css));
|
||
}
|
||
let content = `
|
||
var styles = ${JSON.stringify(cssarr)};
|
||
var scripts = ${JSON.stringify(jsarr)};
|
||
${cdnjs}
|
||
document.write('<div id="app"></div>');
|
||
var title = document.getElementsByTagName('title')
|
||
styles.forEach((item) => {
|
||
let link = document.createElement('link');
|
||
link.href=item;
|
||
link.rel = 'preload';
|
||
link.as = 'style';
|
||
title[0].parentNode.insertBefore(link,title[0])
|
||
link = document.createElement('link');
|
||
link.href=item;
|
||
link.rel = 'stylesheet';
|
||
title[0].parentNode.insertBefore(link,title[0])
|
||
});
|
||
scripts.forEach((item) => {
|
||
document.write('<script src="' + item + '"></script>');
|
||
});
|
||
`;
|
||
// 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
|
||
compilation.assets["app.js"] = {
|
||
source: function() {
|
||
return content;
|
||
},
|
||
size: function() {
|
||
return cssarr.length + jsarr.length;
|
||
},
|
||
};
|
||
|
||
callback();
|
||
}
|
||
);
|
||
}
|
||
}
|
||
|
||
module.exports = BuildAppJSPlugin;
|