let pages = {
? index: {
? ? entry: "src/main.js",
? ? template: "public/index.html",
? ? // 特別注意：由于各個(gè)入口單獨(dú)分離了chunk之后，需要將對于的chunk名顯示的列出
? ? chunks: [
? ? ? "index", //注意：這個(gè)是頁面名稱的chunk,下面的chunk名稱需要對呀splitChunk對應(yīng)的名稱
? ? ? "chunk-vendors", //這是node_modules下的chunk
? ? ? "chunk-common", //這是admin和Index入口公用的chunk
? ? ? "chunk-iview" //index的單獨(dú)chunk
? ? ]
? },
? admin: {
? ? entry: "src/admin.js",
? ? template: "public/admin.html",
? ? // 特別注意：由于各個(gè)入口單獨(dú)分離了chunk之后，需要將對于的chunk名顯示的列出
? ? chunks: [
? ? ? "admin", //注意：這個(gè)是頁面名稱的chunk,下面的chunk名稱需要對呀splitChunk對應(yīng)的名稱
? ? ? "chunk-vendors", //這是node_modules下的chunk
? ? ? "chunk-common", //這是admin和Index入口公用的chunk
? ? ? "chunk-element-ui", //admin的單獨(dú)chunk
? ? ? "chunk-echarts", //admin的單獨(dú)chunk
? ? ? "zrender" //echarts用到了zrender
? ? ]
? }
};
module.exports = {
? pages,
? publicPath: process.env.BASE_URL,
? outputDir: "dist",
? assetsDir: "assets",
? runtimeCompiler: true,
? productionSourceMap: false,
? parallel: true,
? css: {
? ? // 是否提取css 生產(chǎn)環(huán)境可以配置為 true
? ? extract: true
? },
? chainWebpack: config => {
? ? if (process.env.NODE_ENV === "production") {
? ? ? // 刪除系統(tǒng)默認(rèn)的splitChunk
? ? ? config.optimization.delete("splitChunks");
? ? }
? },
? configureWebpack: config => {
? ? // 給輸出的js名稱添加hash
? ? config.output.filename = "[name].[hash].js";
? ? config.output.chunkFilename = "[name].[hash].js";
?
? ? config.optimization = {
? ? ? splitChunks: {
? ? ? ? cacheGroups: {
? ? ? ? ? // 抽離所有入口的公用資源為一個(gè)chunk
? ? ? ? ? common: {
? ? ? ? ? ? name: "chunk-common",
? ? ? ? ? ? chunks: "initial",
? ? ? ? ? ? minChunks: 2,
? ? ? ? ? ? maxInitialRequests: 5,
? ? ? ? ? ? minSize: 0,
? ? ? ? ? ? priority: 1,
? ? ? ? ? ? reuseExistingChunk: true,
? ? ? ? ? ? enforce: true
? ? ? ? ? },
? ? ? ? ? // 抽離node_modules下的庫為一個(gè)chunk
? ? ? ? ? vendors: {
? ? ? ? ? ? name: "chunk-vendors",
? ? ? ? ? ? test: /[\\/]node_modules[\\/]/,
? ? ? ? ? ? chunks: "initial",
? ? ? ? ? ? priority: 2,
? ? ? ? ? ? reuseExistingChunk: true,
? ? ? ? ? ? enforce: true
? ? ? ? ? },
? ? ? ? ? // 由于Index入口使用了iview,所以講iview單獨(dú)處理出來，這樣admin入口就不會使用此js
? ? ? ? ? iview: {
? ? ? ? ? ? name: "chunk-iview",
? ? ? ? ? ? test: /[\\/]node_modules[\\/]iview[\\/]/,
? ? ? ? ? ? chunks: "all",
? ? ? ? ? ? priority: 3,
? ? ? ? ? ? reuseExistingChunk: true,
? ? ? ? ? ? enforce: true
? ? ? ? ? },
? ? ? ? ? // 由于admin入口使用了element-ui,所以講element-ui單獨(dú)處理出來，這樣index入口就不會使用此js
? ? ? ? ? element: {
? ? ? ? ? ? name: "chunk-element-ui",
? ? ? ? ? ? test: /[\\/]node_modules[\\/]element-ui[\\/]/,
? ? ? ? ? ? ? ? ? //根據(jù)你實(shí)際的目錄情況來決定 /[\\/]node_modules[\\/]_?element-ui(.*)/,
? ? ? ? ? ? chunks: "all",
? ? ? ? ? ? priority: 3,
? ? ? ? ? ? reuseExistingChunk: true,
? ? ? ? ? ? enforce: true
? ? ? ? ? },
? ? ? ? ? // 由于admin入口使用了echarts,所以講echarts單獨(dú)處理出來，這樣index入口就不會使用此js
? ? ? ? ? echarts: {
? ? ? ? ? ? name: "chunk-echarts",
? ? ? ? ? ? test: /[\\/]node_modules[\\/](vue-)?echarts[\\/]/,
? ? ? ? ? ? chunks: "all",
? ? ? ? ? ? priority: 4,
? ? ? ? ? ? reuseExistingChunk: true,
? ? ? ? ? ? enforce: true
? ? ? ? ? },
? ? ? ? ? // 由于echarts使用了zrender庫，那么需要將其抽離出來，這樣就不會放在公共的chunk中
? ? ? ? ? zrender: {
? ? ? ? ? ? name: "zrender",
? ? ? ? ? ? test: /[\\/]node_modules[\\/]zrender[\\/]/,
? ? ? ? ? ? chunks: "all",
? ? ? ? ? ? priority: 3,
? ? ? ? ? ? reuseExistingChunk: true,
? ? ? ? ? ? enforce: true
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? };
? }
};

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
? .BundleAnalyzerPlugin;
let pages = {
? index: {
? ? entry: "src/main.js",
? ? template: "public/index.html",
? ? chunks: ["index", "chunk-common"] //分別是入口的名稱，也就是前面的key值,和公共chunk的名稱
? },
? admin: {
? ? entry: "src/admin.js",
? ? template: "public/admin.html",
? ? chunks: ["admin", "chunk-common"] //分別是入口的名稱，也就是前面的key值,和公共chunk的名稱
? }
};
module.exports = {
? pages,
? publicPath: process.env.BASE_URL,
? outputDir: "dist",
? assetsDir: "assets",
? runtimeCompiler: true,
? productionSourceMap: false,
? parallel: true,
? css: {
? ? // 是否提取css 生產(chǎn)環(huán)境可以配置為 true
? ? extract: true
? },
?
? chainWebpack: config => {
? ? // 刪除默認(rèn)的splitChunk
? ? config.optimization.delete("splitChunks");
? },
? configureWebpack: config => {
? ? // js output config
? ? config.output.filename = "[name].[hash].js";
? ? config.output.chunkFilename = "[name].[hash].js";
?
? ? config.optimization = {
? ? ? splitChunks: {
? ? ? ? cacheGroups: {
? ? ? ? ? common: {
? ? ? ? ? ? //抽取所有入口頁面都需要的公共chunk
? ? ? ? ? ? name: "chunk-common",
? ? ? ? ? ? chunks: "initial",
? ? ? ? ? ? minChunks: 2,
? ? ? ? ? ? maxInitialRequests: 5,
? ? ? ? ? ? minSize: 0,
? ? ? ? ? ? priority: 1,
? ? ? ? ? ? reuseExistingChunk: true,
? ? ? ? ? ? enforce: true
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? };
? }
};