webpack配置超全指南

前言

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

一、配置入口 entry

1、单入口和多入口

将源文件加入到 webpack 构建流程,可以是单入口:

 

javascript

复制代码

module.exports = { entry: `./index.js`, }

构建包名称 [name]为 main ;

或多入口:

 

java

复制代码

module.exports = { entry: { "index": `./index.js`, }, }

key:value 键值对的形式:

  • key:构建包名称,即 [name] ,在这里为 index
  • value:入口路径

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

2. 动态配置入口文件

动态打包所有子项目

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

 

javascript

复制代码

// 使用 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 作为入口文件即可。

这种方式比较适合入口文件不集中且较多的场景。

动态打包某一子项目

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

 

arduino

复制代码

npm run build --project components

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

 

arduino

复制代码

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

然后配置入口:

 

javascript

复制代码

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

相当于:

 

java

复制代码

module.exports = { entry: { "index": `./components/index.js`, } }

当然,你可以传入其它参数,也可以应用于多个地方,例如 resolve.alias 中。

二、配置出口 output

用于告知 webpack 如何构建编译后的文件,可以自定义输出文件的位置和名称:

 

java

复制代码

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 位。

作者:gogo2027
链接:https://juejin.cn/post/7205527600700571709
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Build前沿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值