深入浅出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类型

1. string：'./app/entry' 入口模块文件路径，可以是相对路径；
2. array：['./app/entry1','./app/entry2'] 入口模块文件路径，可以是相对路径；
3. 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:[{//命中javascripttest:/\.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-loaderuse:['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~