1. 概述
webpack 是一个强大的模块打包器，可以将各种静态资源（JavaScript、CSS、图片等）打包成静态资源文件。entry 是 webpack 中的一个核心概念，代表着 webpack 打包的入口文件，是一个对象或者字符串。对于大型应用程序来说，entry 是至关重要的。在本文中，我们将深入了解入口文件的配置方法和使用方式。
2. entry 的基本用法
2.1 单个入口文件
最常见的情况是将一个入口文件作为入口，我们只需要将 entry 配置成一个字符串即可：
// webpack.config.js
module.exports = {
entry: './src/index.js',
// ...
};
上面的代码表示，将 ./src/index.js 作为项目的入口文件。
2.2 多个入口文件
有时候，我们需要将多个文件作为入口，这时候我们可以将 entry 配置变成一个对象：
// webpack.config.js
module.exports = {
entry: {
main: './src/main.js',
vendor: './src/vendor.js'
},
// ...
};
上面的代码表示，将 ./src/main.js 和 ./src/vendor.js 作为项目的入口文件。
对象里的属性名可以自定义，它们作为打包后的文件名用于区分不同的入口文件。
3. entry 的高级用法
3.1 动态导入
webpack 还支持动态导入方式，也就是在代码运行的时候，才加载所需要的模块。这种情况下，entry 配置非常特殊：
// webpack.config.js
module.exports = {
entry: {
main: './src/main.js',
},
// ...
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
在 main.js 中，我们可以通过 import() 方法动态加载模块：
// main.js
function getComponent() {
return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}).catch(error => 'An error occurred while loading the component');
}
getComponent().then(component => {
document.body.appendChild(component);
});
上面的代码中，我们通过 import() 方法动态加载了一个 lodash 模块。
需要注意的是，在使用动态导入时，如果未设置 webpackChunkName 则会生成默认的 id，不利于代码分析与维护。
3.2 多页面应用
很多时候我们的项目不是一个单页面应用，而是一个多页面应用。这个时候，我们需要对每个页面设置不同的入口。
首先，我们需要定义一个公共函数来获取页面的路径：
// utils.js
const path = require('path');
function resolve(dir) {
return path.join(__dirname, '..', dir);
}
function getEntry(globPath) {
const entries = {};
const files = glob.sync(globPath);
for (const filepath of files) {
const dirname = path.dirname(filepath);
const name = dirname.split('/').pop();
entries[name] = resolve(filepath);
}
return entries;
}
module.exports = {
resolve,
getEntry,
};
然后，我们需要在 webpack.config.js 中使用它：
// webpack.config.js
const { resolve, getEntry } = require('./utils');
module.exports = {
entry: getEntry('src/pages/**/index.js'),
// ...
};
上面的代码会遍历 src/pages 目录下所有的 index.js 文件，然后将它们作为入口文件。
这种方式适用于多页面应用，但是如果我们的应用比较大，入口文件很多，会导致打包速度变慢，可以使用 preload 与 prefetch 分别对于入口文件与静态文件做处理。
3.3 其他
除了以上这些高级用法，webpack 还支持其他的 entry 配置。
entry: [path] 表示将一个数组作为入口。
entry: { [name]: [path] } 将一个键值对作为入口。
entry: async [name]: [path] 将一个异步模块作为入口。
4. 总结
entry 是 webpack 中的一个核心概念，代表着 webpack 打包的入口文件，可通过一个字符串或对象来配置。在大型应用程序中，entry 的配置非常重要，可以通过动态导入的方式来优化入口，也可以通过 getEntry 函数来适应多页面应用程序。除此之外，entry 还支持很多其他的配置方式。