标签：

webpack 最佳配置指北

前言

对付入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的工作。其实熟悉 webpack 之后会发明很简单，根本的配置可以分为以下几个方面： entry 、 output 、 mode 、 resolve 、 module 、 optimization 、 plugin 、 source map 、 performance 等，本文就来重点分析下这些部分。

内附一张 webpack 零配置比拟图片，存眷公家号【前端瓶子君】答复【webpack】免费获取pdf文件。

一、配置入口 entry 1、单入口和多入口

将源文件插手到 webpack 构建流程，可以是单入口:

module.exports = { entry: `./index.js`, } 复制代码

构建包名称 [name]为 main ；

或多入口：

module.exports = { entry: { "index": `./index.js`, }, } 复制代码

key:value 键值对的形式：

key：构建包名称，即 [name] ，在这里为 index

value：入口路径

入口决定 webapck 从哪个模块开始生成依赖关系图（构建包），每一个入口文件都对应着一个依赖关系图。

2. 动态配置入口文件 动态打包所有子项目

当构建项目包罗多个子项目时，每次增加一个子系统都需要将入口文件写入 webpack 配置文件中，其实我们让webpack 动态获取入口文件，例如：

// 使用 glob 等工具使用若干通配符，运行时获得 entry 的条目 module.exports = { entry: glob.sync(‘./project/**/index.js‘).reduce((acc, path) => { const entry = path.replace(‘/index.js‘, ‘‘) acc[entry] = path return acc }, {}), } 复制代码

则会将所有匹配 ./project/**/index.js 的文件作为入口文件进行打包，如果你想要增加一个子项目，仅仅需要在 project 创建一个子项目目录，并创建一个 index.js 作为入口文件即可。

这种方法对照适合入口文件不集中且较多的场景。

动态打包某一子项目

在构建多系统应用或组件库时，我们每次打包可能仅仅需要打包某一模块，此时，可以通过命令行的形式请求打印某一模块，例如：

npm run build --project components 复制代码

在打包的时候解析命令行参数：

// 解析命令行参数 const argv = require(‘minimist‘)(process.argv.slice(2)) // 项目 const project = argv[‘project‘] || ‘index‘ 复制代码

然后配置入口：

module.exports = { entry: { "index": `./${project}/index.js`, } } 复制代码

相当于：

module.exports = { entry: { "index": `./components/index.js`, } } 复制代码

固然，你可以传入其它参数，也可以应用于多个处所，例如 resolve.alias 中。

二、配置出口 output

用于奉告 webpack 如何构建编译后的文件，可以自界说输出文件的位置和名称:

module.exports = { output: { // path 必需为绝对路径 // 输出文件路径 path: path.resolve(__dirname, ‘../../dist/build‘), // 包名称 filename: "[name].bundle.js", // 或使用函数返回名(不常用) // filename: (chunkData) => { // return chunkData.chunk.name === ‘main‘ ? ‘[name].js‘: ‘[name]/[name].js‘; // }, // 块名，大众块名(非入口) chunkFilename: ‘[name].[chunkhash].bundle.js‘, // 打包生成的 index.html 文件里面引用资源的前缀 // 也为颁布到线上资源的 URL 前缀 // 使用的是相对路径，默认为 ‘‘ publicPath: ‘/‘, } } 复制代码

在 webpack4 开发模式下，会默认启动 output.pathinfo ，它会输出一些特别的注释信息，对项目调试非常有用，尤其是使用 eval devtool 时。

filename ：[name] 为 entry 配置的 key，除此之外，还可以是 [id] （内部块 id ）、 [hash]、[contenthash] 等。

1. 浏览器缓存与 hash 值

对付我们开发的每一个应用，浏览器城市对静态资源进行缓存，如果我们更新了静态资源，而没有更新静态资源名称（或路径），浏览器就可能因为缓存的问题获取不到更新的资源。在我们使用 webpack 进行打包的时候，webpack 供给了 hash 的观点，所以我们可以使用 hash 来打包。

在界说包名称（例如 chunkFilename 、 filename），我们一般会用到哈希值，差此外哈希值使用的场景差别：

hash