在开发前端项目过程中,经常会使用webpack来对项目进行构建和打包,而webpack有很多的配置,一般我们都将webpack的配置单独写在webpack.config.js内,作为入门指导,本篇文章主要介绍webpack.config.js中的常见字段是什么意思,大致了解每个字段有什么用
基本结构
webpack的配置基本都写在 webpack.config.js
中,其基本结构如下:
module.export = { |
字段介绍
entry
entry的作用是配置webpack打包的入口文件,也就是“从哪个文件开始打包”。
output
output的作用是webpack打包后的输出配置,常见的有输出的文件名、输出位置等等,其数据格式为 object
。
常见字段如下
filename:配置文件名,可以写死,也可以采用类似
[hash].js
的形式path:配置入口文件打包后输出的位置,必须是绝对路径,可以用node中的path模块来拼接绝对路径
assetModuleFilename:配置静态资源如图片等打包后的存放位置,可以是相对路径,也可以是绝对路径,同样的,存放位置也支持
hash
形式
示例
const path = require('path') |
module
rules
rules主要用于配置 loader
,其数据格式为数组对象,如下
rules: [ |
由于webpack只认识js和json,并不认识其它类型的文件,假如我们的代码或项目中引入了图片、预处理器之类的文件时,webpack将无法打包。
这时,loader
就起到了解决这个问题的作用,我们要知道,loader 的作用就类似于一个翻译官,把那些webpack不认识的文件,处理成可以让webpack认识的文件,就好比你(webpack)看不懂外文,借助翻译软件(loader),你就能看懂了。
要想让webpack能够处理别的文件,我们就需要对某类文件进行相应的loader配置,其常见的配置字段如下:
- test:通过正则表达式匹配我们要处理的文件
- use:格式为数组或数组对象,在里面写上我们需要用到的所有loader
- loader:相当于 use 的简写,格式为字符串,跟 use 的区别在于,loader只能配置一个loader,而 use 为数组,可以配置多个loader
- options:格式为对象,用于对我们的loader进行配置
- type:格式为字符串,为
webpack5
新增,常用于处理静态文件的输出和存储方式 - parser:格式为对象,为
webpack5
新增,常用于处理静态文件的输出和存储方式 - generator:格式为对象,为
webpack5
新增,常用语处理静态文件的生成配置,如文件名等等
type、parser、generator可以去webpack官网进行参考
示例:
module.export = { |
详细字段自行去webpack官网查看
mode
模式配置,设置webpack的打包模式,其数据格式为字符串,其可选值如下
development
:代表在开发环境下,此时webpack打包编译的时候会省略掉一些优化处理production
:代表在生产环境下,此时webpack打包编译的时候会进行部分优化,例如代码压缩、去除注释等等。
target
类型:string
、[string]
、false
描述:用于配置编译的目标,告知 webpack 为目标(target)指定一个环境。默认值为 "browserslist"
,如果没有找到 browserslist 的配置,则默认为 web
。
常用的值如下:
web
:指定打包后的东西运行在浏览器中。node
:指定打包后的东西运行在node中。esX
:编译为指定版本的js代码。
其它详细字段可以参考官网
devtool
类型:string
描述:用于生成source-map源代码映射文件。