引言
在工程中会有npm run dev -- {string}这种操作命令，用来启动不同页面程序，对项目中该配置实现进行学习。
代码解析
account工程中页面内容全部放在src文件夹下面，并且每一个页面单独一个文件夹。 如下为account工程中webpack.config.base.js中代码片段：
// 1\. 通过nodejs中path.resolve方法将相对路径转为绝对路径，获取src目录路径
const src = path.resolve(__dirname, '../src');
const folders = fs.readdirSync(src); // 内置模块同步读取src文件夹下子集的文件名称
let website = process.argv[process.argv.length - 1]; // process.argv取出当前命令行参数，返回数组 取到当前站点的名称 字符串（这里即是操作命令执行npm run dev -- {var}输入名称）
let entryMap = {}; // 不同站点入口文件对象
let entry = [];
// 读取src目录下以ok开头的文件夹，工程中有okcoin,okex,oklink
folders.forEach((item) => {
if (/^ok/.test(item)) {
entryMap[item] = path.resolve(src, item, 'index.js');
entry.push(item);
}
});
// 通过打印输出，entry为 [ 'okcoin', 'okex', 'oklink' ]
/* 打印输出entryMap： { okcoin: '/Users/linayang/code/work/account/src/okcoin/index.js',
okex: '/Users/linayang/code/work/account/src/okex/index.js',
oklink: '/Users/linayang/code/work/account/src/oklink/index.js' }
*/
// 判断站点，匹配其对应index.js文件
if (entryMap[website]) {
entryMap = {
[website]: path.resolve(src, website, 'index.js')
};
entry = [website];
} else {
website = '';
}
const base = {
entry: entryMap, // 多入口文件
output: {
filename: '[name]/index.js', // 打包出口文件的文件名称模板
chunkFilename: 'common/[name]/[name].js',
path: path.resolve(__dirname, '../dist'), // 所有输出文件的目标目录
},
根据 运行操作命令npm run dev -- okcoin后编译输出： 输出结果：
image
打包流程
每次打包时，动态获取entry入口，根据entry信息，自动设置置html-webpack-plugin数量，
遍历入口文件集合创建html-webpack-plugin设置，打开对应页面：
plugins: [
process.env.NODE_ENV === 'production' ?
new MiniCssExtractPlugin({
filename: '[name]/index.css',
chunkFilename: 'common/[name]/[name].css'
})
: null,
...entry.map((item) => {
return new HtmlWebpackPlugin({
template: path.resolve(src, item, 'index.html'),
filename: website !== '' ? 'index.html' : `${item}/index.html`,
chunks: [item],
excludeChunks: ['themes']
});
}),
【html-webpack-plugin插件：1.为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题 2.可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口】
同时webpack.config.dev.js中设置相应配置。
以上相关配置，最终使在项目启动时，可以指定文件打包，运行指定页面。