2019.10.13-Week-webpack多文件入口

引言

在工程中会有npm run dev -- {string}这种操作命令，用来启动不同页面程序，对项目中该配置实现进行学习。

代码解析

account工程中页面内容全部放在src文件夹下面，并且每一个页面单独一个文件夹。

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目录下以xx开头的文件夹，工程中有xx
folders.forEach((item) => {
  if (/^xx/.test(item)) {
    entryMap[item] = path.resolve(src, item, 'index.js');
    entry.push(item);
  }
});

// 判断站点，匹配其对应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 -- 后编译输出： 输出结果：

打包流程

每次打包时，动态获取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个页面入口

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