大家好，我是前端西瓜哥，我们来聊聊 webpack 如何进行配置。

webpack 是被广泛使用的开源前端打包工具。

webpack 支持模块化开发，任何类型的文件都会被当作模块，通过加载引入的方式形成依赖树，生成一个或几个文件。

我们用 yarn 初始化一个前端项目，然后安装 webpack 和 webpack-cli 依赖。

yarn init -y
yarn add -D webpack webpack-cli

创建一个 webpack.config.js 文件，用于配置打包的细节。

虽然我们写前端代码时用的模块化方案通常是 ES6 的 module，因为它面向未来，但 webpack 本质还是一个 nodejs 项目，所以我们在 webpack.config.js 中还是需要用 commonjs 的模块写法。

module.exports = {
  // 配置内容
}

entry

entry 用于指定项目的入口文件。如果没有设置，会使用默认值 ./src/index.js。

entry: './src/app.js',

选定入口文件后，webpack 就会以该文件为起点，找到导入到入口文件的模块，以及导入到模块的模块，不断递归，最后构造成一个依赖树。

通过依赖树，webpack 可以将用到的文件打包成到一个文件。

不在依赖树中的文件不会被打包进去，以前刀耕火种的时代，都是在 HTML 下直接引入 js 文件，没管理好可能会引入多余依赖，webpack 解决了这个问题。

entry 也可以是对象或数组形式，这样就会有多个入口文件，但最终会被打包成一个文件。

output

output 用于设置生成文件的命名、路径等配置。如果不配置，会生成到 ./dist/main.js 文件下。

const path = require('path');

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'path/to/app.js',
  },
  // ...
}

output 必须为一个对象。

通过 path，我们可以指定打包文件所在的根目录，需要特别注意的是，这 path 必须为绝对路径。path 如果不提供，根目录就会设置为当前目录下的 dist 文件夹。

filename 为打包出来的文件名，可以加一些子路径。如果不提供 filename，会被设置为 main.js。

output.filename

output 的 filename 的作用不仅于此，我们简单展开说说。

给文件名添加哈希值

我们可以提供在文件名的末尾加一个可能会改变哈希值。

哈希值有什么用呢？答案是解决浏览器缓存问题，如果改动后文件还保持原来的名字，浏览器可能还会使用旧的缓存。

我们在构建的时候，如果触发特定条件，比如文件内容变化，就提供一个新的哈希值，就可以解决浏览器缓存的问题。

output: {
  filename: 'app-[contenthash].js',
},
// 生成文件名：app-5fd7e75fbe3ff0440f59.js

filename.output 使用了 [contenthash]，表示应用内容哈希，生成长度为 20 的哈希串。

如果你觉得太长了，可以通过 [contenthash:8] 的写法控制哈希串长度。

此外还有其他哈希的写法，这里就不展开了。

生成多个打包文件

const path = require('path')

module.exports = {
  entry: {
    preIndex: './src/preIndex.js',
    index: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
  },
}

output.filename 用了 [name] 的语法，意思是根据 entry 对象，根据多个入口文件，生成多个打包文件。

前提是 entry 需要为对象的形式。如果格式不对，filename 值会被认为无效，使用回默认的 main.js。