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) {
compiler.hooks.emit.tapAsync(
"BuildAppJSPlugin",
(compilation, callback) => {
const isProd = process.env.NODE_ENV === "production"
let cssarr = [];
let jsarr = [];
let reg = "";
if (isProd) {
reg = "(app|chunk-vendors)\\.";
}
// 遍历所有编译过的资源文件
for (let filename in compilation.assets) {
if (filename.match(reg + ".*\\.js$")) {
if (isProd) {
filename = (process.env.VUE_APP_CDN_PATH || "/") + filename;
} else {
filename = "/" + filename;
}
jsarr.push(filename);
}
if (filename.match(reg + ".*\\.css$")) {
cssarr.push(filename);
}
}
cssarr = cssarr.sort(function (a) {
return a.indexOf("app.");
});
var cdnjs = "";
if (isProd) {
cssarr = cdn.css.concat(cssarr);
cdnjs = `var cdnjs = ${JSON.stringify(cdn.js)};
cdnjs.forEach((item) => {
document.write('');
});`;
} else {
cssarr = cssarr.concat(
cdnDependencies.filter((e) => e.name === "").map((e) => e.css)
);
}
let content = `
var scripts = ${JSON.stringify(jsarr)};
${cdnjs}
scripts.forEach((item) => {
document.write('');
});
`;
let cssContent = "";
cssarr.forEach((item) => {
cssContent += `@import url(${item});\n`;
});
// 将这个列表作为一个新的文件资源,插入到 webpack 构建中:
compilation.assets["app.js"] = {
source: function () {
return content;
},
size: function () {
return jsarr.length;
},
};
compilation.assets["style.css"] = {
source: function () {
return cssContent;
},
size: function () {
return cssarr.length;
},
};
callback();
}
);
}
}
module.exports = BuildAppJSPlugin;