WebPack - entry 与通配符

Webpack.config.js的entry属性定义了打包文件的入口点。
参考：https://webpack.docschina.org/configuration/entry-context/#entry

但在实践中开发人员可能会发现其不便之处：对于multi-page app，需要为每个js文件(假设每个页面都会引入不同的js)配置entry。
那么是否可以用通配符(wildcard)实现多entry通配呢？ 答案是：可以的，使用glob

npm install glob --save-dev

修改 webpack.config.js

const glob = require('glob');

//使用通配符，找到所有需要打包的文件
const entryFiles = glob.sync(path.join(__dirname, './src/**/*.ts'))
//输出示例：
// [
//   'D:/webpack/TSUnitTest/src/sample/foo01.ts',
//   'D:/webpack/TSUnitTest/src/sample/foo02.ts'
// ]

//调整格式，从string数组，变为对象结构。 因为对象结构可以定义输出的文件名。 数组的话，bundle文件默认是main.js
let entryObj = {};
entryFiles.forEach((entry)=>{
  const filenameRegex = /([\w\d_-]*)\.?[^\\\/]*$/i;
  //得到文件名，作为输出的bundle文件的文件名
  let fileName = entry.match(filenameRegex)[1]
  entryObj[fileName] = { import: entry };
});
//输出示例：
// entryObj {
//   foo01: { import: 'D:/webpack/TSUnitTest/src/wildcards/foo01.ts' },
//   foo02: { import: 'D:/webpack/TSUnitTest/src/wildcards/foo02.ts' }
// }

module.exports = {
  //注释掉原有的逻辑
  // entry: {
  //   Foo: './src/Foo.ts',
  //   Print: './src/Print.js',
  //   Home01: { import: './src/Home.js', filename: 'pages/[name].js' },
  // },
  entry: entryObj,

最后说一下 dependon 属性，该属性用于将公共代码单独打包，而不是每个引用到的地方都打包。 代码示例如下：

entryObj['common'] = {
  import: './src/dependon/common.ts',         //导入的文件
  filename: './dist/shared/common.bundle.js', //输出的文件
}

//这里指定了dependOn，所以shared01.bundle.js只会包含common.ts的引用(require('common.bundle.js'))。
entryObj['shared01'] = {
  import: './src/dependon/page01.ts',
  filename: './dist/shared/shared01.bundle.js',
  dependOn: 'common'
}

entryObj['shared02'] = {
  import: './src/dependon/page02.ts',
  filename: './dist/shared/shared02.bundle.js',
  dependOn: 'common'
}

//这里没有指定dependOn，所以shared03.bundle.js会包含common.ts中的所有代码。
entryObj['shared03'] = {
  import: './src/dependon/page02.ts',
  filename: './dist/shared/shared03.bundle.js'
}