深入浅出Webpack2-快速掌握webpack基本配置
上一篇文章我们快速上手认识了一下webpack,今天这篇文章我们将介绍如何配置webpack
配置Webpack的方式有两种:
- 通过js文件描述配置,例如使用webpack.config.js文件中的配置
- 执行webpack可执行文件时通过命令行参数传入,例如:
webpack --devtool source-map
下面介绍具体的详细配置
1.Entry
这个是配置模块的入口,webpack执行构建的第一步将从入口开始,搜寻及递归解析出所有入口依赖的模块,这个配置是必填的,否则webpack将报错。
1.1 context
webpack在寻找相对路径的文件的时候会以context
为根目录,默认是执行启动webpack的时候的当前工作目录,如果要改变context
默认配置,则需要在配置文件中这样设置:
module.exports={
context:path.resolve(__dirname,'app')
}
1.2 Entry类型
string
:'./app/entry'
入口模块文件路径,可以是相对路径;array
:['./app/entry1','./app/entry2']
入口模块文件路径,可以是相对路径;object
:{a:'./app/entry1',b:['./app/entry2','./app/entry3']}
配置多个入口,每个入口生成一个Chunk;
这个chunk
我们可能不太理解,Chunk
的名称和Entry
的配置有关:
- 如果
entry
是一个string
或array
,就只会生成一个Chunk
,这个Chunk
的名称就是main
; - 如果
entry
是一个object
,那么Chunk
的名称就是object
键值对中健的名称。
除了上面的静态配置Entry
之外,也可以通过函数动态的配置:
//同步函数
entry:()=>{
return {
a:'./pages/a',
b:'./pages/b'
}
}
2.Output
这个配置主要是配置如何输出最终想要的代码,output
是一个object
,里面包含一系列配置项:
2.1 filename
配置输出文件的名称,如果只有一个输出文件filename:'bundle.js'
如果有多个Chunk输出:filename:'[name].js'
这里的name
是内置变量,代表Chunk
的名称,除此之外,还有其他的内置变量,比如id
,是Chunk
的唯一标识;
2.2 path
这个是配置输出文件存放在本地的目录,必须是string
类型的绝对路径,通常要用node.js
中的path
模块去获取绝对路径:
path:path.resolve(__dirname,'dist_[hash]')
3.Module
module配置处理模块的规则
3.1配置Loader
rules
配置模块的读取和解析规则,通常用来配置Loader
,其类型是一个数组,数组每一项都描述了如何处理部分文件;
配置
rules时,通过
test、
include、
exclude三个配置项来选中
Loader要应用规则的文件。 对选中的文件通过
use配置来应用
Loader,可以只应用一个
Loader`或者按照从后往前的顺序应用。
module:{
rules:[
{
//命中javascript
test:/\.js$/,
//用babel-loader转换javascript文件
//?cacheDicrectory表示传给babel-loader的参数,用于缓存babel的编译结果,加快重新编译的速度
use:['babel-loader?cacheDirectory'],
//只命中src目录中的javascript文件,加快webpack的搜索速度
include:path.resolve(__dirname,'src')},
{
//命中SCSS文件
test:/\.scss$/,
//使用一组Loader去处理SCSS文件
//处理顺序为从后到前,即先交给sass-loader处理,再将结果交给css-loader,最后交给style-loader
use:['style-loader','css-loader','sass-loader'],
//排除node_modules目录下的文件
exclude:path.resolve(__dirname,'node_modules')
},
{
//对非文本文件采用file-loader加载
test:/\.(gif|png|jpe?g|eot|wpff|ttf|svg|pdf)$/,
use:['file-loader']
}
]
}
上面的例子简要的列举了如何去配置Loader,很多细节还是推荐大家去看书查阅。
4.Resolve
webpack
在启动后会从配置的入口模块出发找出所有依赖的模块,resolve
配置webpack
如何寻找模块所对应的文件
4.1 alias
resolve:{
alias:{
components:'./src/components/'
}
}
当通过import Button from 'components/button
导入的时候,实际上被alias
等价替换成import Button from './src/components/button
4.2 extensions
在导入语句没带文件后缀时候,webpack会自动带上后缀去尝试访问文件是否存在。
extensions:['.js','.json']
上述代码表示,当遇到require('./data')
这样的导入语句的时候,webpack会先寻找./data.js
文件,如果该文件不存在,就会去寻找./data.json
文件,如果还是找不到,就报错。
4.3 modules
resolve.modules
配置webpack去哪些目录下寻找第三方模块,默认只会去node_modules目录下寻找
modules:['./src/components','node_modules']
这个代码就表明,第三方库除了node_modules之外还有'./src/components'
5.Plugin
plugin用于扩展webpack的功能,plugin的配置很简单,plugins配置项接收一个数组,数组每一项都是plugin的实例,plugin需要的参数通过构造函数传入
const CommonsChunkPlugin=require('webpack/lib/optimize/CommonsChunkPlugin');
module.exports={
plugins:[
//所有的代码都会用到的公共代码会被提取到common代码块中
new CommonsChunkPlugin({
name:'common',
chunks:['a','b']
})
]
}
学会使用plugin
其实并不难,关键在于如何掌握plugin
本身提供的配置项,几乎所有的webpack
无法直接实现的功能都能在社区找到开源的plugin
去解决,我们在日后写代码的过程中要善于使用搜索引擎去寻找解决问题的方法。
6.DevServer
要配置DevServer
,除了可以在配置文件中通过devServer
传入参数,还可以通过命令行参数传入,注意。只有通过DevServer
启动Webpack
的时候,配置文件中的devServser
才会生效。
官网中给出了这样一个例子:
const path = require('path');
module.exports = {
//...
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 9000,
},
};
这是一个基本的示例,static.directory
配置服务器的文件根目录,compress
配置是否启用Gzip
压缩public/
目录下的文件,默认为false
,port
配置服务监听的端口,默认使用8080
端口,如果8080
被占用,就使用8081
,如果8081
还是被占用,就使用8082
,以此类推,除此之外还有些其他的配置,具体参照中文文档。
7.其他配置项
Devtool:
配置webpack
生成source map
,默认为false
module.export{
devtool:'source-map'
}
从前面的描述,webpack
其实有很多选项,我也是摘取了一些比较常用的配置,webpack
内置了很多功能,我们不必都记住他们,只需要大概明白webpack
原理和核心,并判断选项大致属于哪个大模块下,再去查详细的使用文档就好。
我们可以通过下面的经验去判断如何配置webpack
:
- 若想让源文件加入构建流程中被
webpack
控制,则配置entry
; - 若想自定义输出文件的位置和名字,则配置
output
; - 若要自定义寻找依赖模块的策略,则配置
resolve
; - 若要自定义解析和转换文件的策略,配置
module
- 其他大部分需求可能通过
plugin
去实现;
下一篇文章中,我们将通过具体的实例,介绍如何使用webpack~