You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
4.3 KiB
141 lines
4.3 KiB
'use strict'; |
|
const PageTitle = require('./title.config'); |
|
|
|
const path = require('path'); |
|
|
|
// glob 是 webpack 安装时依赖的一个第三方模块，该模块允许你使用 * 等符号, |
|
// 例如 lib/*.js 就是获取 lib 文件夹下的所有 js 后缀名的文件 |
|
const glob = require('glob'); |
|
|
|
// const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); |
|
|
|
/** |
|
* 多入口配置 |
|
* 通过 glob 模块读取 pages 文件夹下的所有对应文件夹下的 js * 后缀文件，如果该文件存在 |
|
* 那么就作为入口处理 |
|
* */ |
|
function getEntries() { |
|
const pages = {}; |
|
|
|
/** @type {Array} */ |
|
const entries = glob.sync('./src/pages/**/*.app.js'); |
|
entries.forEach(filePath => { |
|
// filePath: "./src/pages/index.app.js" ==> "/index.html" |
|
// filePath: "./src/pages/my/info.app.js" ==> "/my/info.html" |
|
// name: 'my/info' |
|
const name = filePath.split('./src/pages/')[1].split('.app.js')[0]; |
|
const title = PageTitle.getPageTitleByPath(name); |
|
if (!title) { |
|
console.error(`[Multiple Entry]: "${name}" page has no matching title`); |
|
} |
|
|
|
pages[name] = { |
|
// page 的入口 |
|
entry: filePath, |
|
// 模板来源 |
|
template: 'public/index.html', |
|
|
|
// 在 `dist/` 文件夹的输出 |
|
/* filename: `${name}.html`, */ |
|
|
|
// 当使用 title 选项时， |
|
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> |
|
title: title || 'Coin Exchange', |
|
|
|
// 在这个页面中包含的块，设置为 |
|
// 提取出来的通用 chunk 和 vendor chunk，加本身这个模块。 |
|
chunks: ['chunk-vendors', 'chunk-common', 'chunk-element-ui', name], |
|
}; |
|
|
|
// console.log(`[Multiple Entry]: ${name}`); |
|
}); |
|
|
|
// console.log(JSON.stringify(pages, null, 2)); |
|
return pages; |
|
} |
|
|
|
module.exports = { |
|
pages: getEntries(), |
|
configureWebpack: { |
|
plugins: [ |
|
// // 注意一定要在HtmlWebpackPlugin之后引用 |
|
// // inline 的name 要能筛选抽离出来的 runtimeChunk |
|
// new ScriptExtHtmlWebpackPlugin({ |
|
// // eg: runtime~my/info.a5c5787a.js |
|
// // eg: runtime~index.c3f6d013.js |
|
// inline: /runtime(?:~.+)?(?:\..+\.js)$/, |
|
// }), |
|
], |
|
|
|
optimization: { |
|
// optimization.splitChunks |
|
// https://webpack.js.org/plugins/split-chunks-plugin#optimizationsplitchunks |
|
splitChunks: { |
|
maxInitialRequests:6 , //初始化最大请求数 |
|
cacheGroups: { |
|
// element UI 单独打包 |
|
elementUI: { |
|
chunks: 'all', |
|
name: 'chunk-element-ui', |
|
test: module => { |
|
/** |
|
* 因为用 scss 自定义了 element ui 样式，不从官方方直接导入样式， |
|
* 所以要将 `src/plugins/element.scss` 加入匹配 |
|
*/ |
|
for (const chunk of module.chunksIterable) { |
|
if (!(chunk.name && module.nameForCondition)) { |
|
continue; |
|
} |
|
|
|
/** @type string */ |
|
const moduleName = module.nameForCondition(); |
|
if ( |
|
moduleName.includes(path.join('node_modules/element-ui')) || |
|
moduleName.includes(path.join('src/plugins/element.scss')) |
|
) { |
|
return true; |
|
} |
|
} |
|
|
|
return false; |
|
}, |
|
priority: 20, |
|
}, |
|
|
|
// 第三方库 |
|
vendors: { |
|
name: 'chunk-vendors', |
|
test: /[\\/]node_modules[\\/]/, |
|
priority: -10, |
|
chunks: 'initial', |
|
}, |
|
|
|
// chunk-common |
|
common: { |
|
name: 'chunk-common', |
|
minChunks: 4, |
|
priority: -20, |
|
chunks: 'initial', |
|
reuseExistingChunk: true, |
|
}, |
|
|
|
// 测试用 |
|
// 用于输出模块路径，便于测试 |
|
// plugins: { |
|
// name: 'chunk-custom-plugins', |
|
// chunks: 'all', |
|
// test: /[\\/]src[\\/]plugins[\\/]/, |
|
// // test: module => { |
|
// // console.log('splitChunks.cacheGroups.plugins', module.context); |
|
// // return false; |
|
// // }, |
|
// // minChunks: 3, |
|
// priority: 10, |
|
// }, |
|
}, |
|
}, |
|
|
|
// runtimeChunk: true, |
|
}, |
|
}, |
|
};
|
|
|