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 从哪个模块开始生成依赖关系图（构建包），每一个入口文件都对应着一个依赖关系图。

webpack视频讲解：进入学习

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

build-specific， 哈希值对应每一次构建（ Compilation ），即每次编译都不同，即使文件内容都没有改变，并且所有的资源都共享这一个哈希值，此时，浏览器缓存就没有用了，可以用在开发环境，生产环境不适用。

chunkhash

chunk-specific， 哈希值对应于 webpack 每个入口点，每个入口都有自己的哈希值。如果在某一入口文件创建的关系依赖图上存在文件内容发生了变化，那么相应入口文件的 chunkhash 才会发生变化，适用于生产环境

contenthash

content-specific，根据包内容计算出的哈希值，只要包内容不变，contenthash 就不变，适用于生产环境

webpack 也允许哈希的切片。如果你写 [hash:8] ，那么它会获取哈希值的前 8 位。

注意：

• 尽量在生产环境使用哈希
• 按需加载的块不受 filename 影响，受 chunkFilename 影响
• 使用 hash/chunkhash/contenthash 一般会配合 html-webpack-plugin （创建 html ，并捆绑相应的打包文件） 、clean-webpack-plugin （清除原有打包文件） 一起使用。

2. 打包成库

当使用 webapck 构建一个可以被其它模块引用的库时：

module.exports = {
   
  output: {
    
    // path 必须为绝对路径
    // 输出文件路径
    path: path.resolve(__dirname, '../../dist/build'),
    // 包名称
    filename: "[name].bundle.js",
    // 块名，公共块名(非入口)
    chunkFilename: '[name].[chunkhash].bundle.js',
    // 打包生成的 index.html 文件里面引用资源的前缀
    // 也为发布到线上资源的 URL 前缀
    // 使用的是相对路径，默认为 ''
    publicPath: '/', 
    // 一旦设置后该 bundle 将被处理为 library
    library: 'webpackNumbers',
    // export 的 library 的规范，有支持 var, this, commonjs,commonjs2,amd,umd
    libraryTarget: 'umd',
  }
}

三、配置模式 mode（webpack4）

设置 mode ，可以让 webpack 自动调起相应的内置优化。

module.exports = {
   
  // 可以是 none、development、production
  // 默认为 production
  mode: 'production'
}

或在命令行里配置：

"build:prod": "webpack --config config/webpack.prod.config.js --mode production"

在设置了 mode 之后，webpack4 会同步配置 process.env.NODE_ENV 为 development 或 production 。

webpack4 最引人注目的主要是：

• 减小编译时间

  打包时间减小了超过 60%

• 零配置

  我们可以在没有任何配置文件的情况下将 webpack 用于各种项目

webpack4 支持零配置使用，这里的零配置就是指，mode 以及 entry （默认为 src/index.js）都可以通过入口文件指定，并且 webpack4 针对对不同的 mode 内置相应的优化策略。

1. production

配置：

// webpack.prod.config.js
module.exports = {
   
  mode: 'production',
}

相当于默认内置了：

// webpack.prod.config.js
module.exports = {
   
  performance: {
   
    // 性能设置,文件打包过大时，会报警告
    hints: 'warning'
  },
  output: