webpack 入口和出口
简介
webpack 的入口决定系统从哪个文件开始解析，出口则决定，将所有内容打包放在哪个文件。
如图所示，入口 entry.js 引入多个文件，通过 webpack 打包之后，将统一打包生成 output.js 文件
入口配置
webpack 入口通过 entry 字段配置，支持两种模式，字符串和对象模式
字符串模式
entry 后直接写入文件路径字符串，适用于简单项目，直接指定单一入口文件
{
entry: 'src/index.js'
}对象模式
entry 是一个对象，对象的 key 是文件命名
{
entry: {
main: 'src/index.js',
login: 'src/login/index.js'
}
}
对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。
出口配置
作用：决定打包后的文件存放位置及文件名
基本配置
{
output: {
filename: 'output.js',
path: path.resolve(__dirname, 'dist'),
}
}webpack 出口通过 output 字段配置，output 支持通过一个对象配置，其中 filename 必须
filename 生成规则
filename 通过一个字符串指定，除此之外 webpack 内部指定了特殊占位符 [type]，让开发者灵活配置
| 占位符 | 含义 |
|---|---|
| [name] | 入口 entry 通过对象指定的文件名，entry 如果是字符串，取默认值 main |
| [chunkhash] | 基于整个 chunk 的哈希，任何一个模块或依赖的变化都会导致哈希变化 |
| [contenthash] | 只基于文件内容的哈希，仅在该文件的内容发生变化时才会导致哈希变化 |
| [id] | webpack 内部自增id或者随机字符串 |
示例：
{
entry: {
main: 'src/index.js',
},
output: {
filename: '[name]-[contenthash].js',
}
}输出文件 main-fisofadahfalvhiwe.js
path 属性
通过 path 属性，可以设置所有产出的输出文件目录，默认是当前工程的 dist 目录
const path = require('path');
{
ilename: 'foo.bundle.js',
path: path.resolve(__dirname, 'dist'),
},示例项目
项目结构：
project/
├── src/
│ ├── index.js
│ └── add.js
└── webpack.config.jssrc/index.js
const add = require('./add')
add(1, 2)src/add.js
function add(a, b) {
return a + b
}
module.exports = addwebpack.config.js
module.exports = {
entry: {
main: './src/index.js',
},
output: {
filename: '[name]-[contenthash].js',
}
}- 执行webpack命令
npx webpack，将会生成一个dist/main-860977d046a55d62e357.js这里使用的 contenthash，如果代码都按上面示例复制那么所有人生成的文件都是一致的。
(() => {
var r = {
567: r => {
r.exports = function (r, t) {
return r + t
}
}
}, t = {};
(function e(o) {
var n = t[o];
if (void 0 !== n) return n.exports;
var p = t[o] = {exports: {}};
return r[o](p, p.exports, e), p.exports
})(567)(1, 2)
})();总结
入口（Entry）：指定 Webpack 从哪个文件开始打包。支持字符串和对象两种模式，后者更适合复杂项目
出口（Output）：定义打包后文件的存放位置和文件名。通过占位符（如
[name]、[chunkhash]、[contenthash]、[id]）实现灵活的文件名配置，优化缓存管理
