在webpack中使用动态方式创建入口

webpack动态创建入口方法

我们知道，create-react-app创建的应用默认是SPA的架子，入口只有index.html。但是有些情况下我们确实需要在同一个工程下开发多个SPA项目，比如一个项目中包含一个2C的H5项目和一个后台的管理项目。很多人都知道webpack支持多页面应用开发，我们可以通过webpack的多入口配置，实现不同入口文件对应不同页面，但是在需要开发多个SPA项目的时候，问题就来了。

网上关于多页面的配置已经很多了，这里只是想记录一些扩展方法。项目的基本结构如下。

.
├── package.json
├── node_modules
├── public
│   └── index.html
├── src
│   ├── index.js
│   ├── index2.js
│   └── index3.js
├── webpack.config.js

最简单的webpack配置如下。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    index2: './src/index2.js',
    index3: './src/index3.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
};

这样配置之后，运行webpack命令即可在dist目录下生成三个js文件，分别是index.js、index2.js和index3.js。

但是这种配置有一个问题，就是当我们需要增加一个页面的时候，我们需要手动修改webpack.config.js文件，添加新的入口配置，然后重新运行webpack命令。这样不仅麻烦，而且容易出错。

为了解决这个问题，我们可以使用webpack的动态创建入口方法。

const path = require('path');
const glob = require('glob');

module.exports = {
  mode: 'development',
  entry: glob.sync('./src/*.js').reduce((entries, entry) => {
    const entryName = path.parse(entry).name;
    entries[entryName] = entry;
    return entries;
  }, {}),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
};

通过这种方式，我们可以动态地创建入口文件，当我们需要增加一个页面的时候，只需要在src目录下添加一个js文件，然后运行webpack命令即可。

这种方法不仅简单易用，而且可以很好地支持多页面和SPA应用开发。