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;
|