2019-10-12 webpack多文件入口

引言

在工程中会有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中设置相应配置。

以上相关配置，最终使在项目启动时，可以指定文件打包，运行指定页面。