网站建设氺首选金手指12,网络营销服务的内容,视频分享网站怎么做的,免费合作推广深入浅出Webpack2-快速掌握webpack基本配置1.Entry1.1 context1.2 Entry类型2.Output2.1 filename2.2 path3.Module3.1配置Loader4.Resolve4.1 alias4.2 extensions4.3 modules5.Plugin6.DevServer7.其他配置项上一篇文章我们快速上手认识了一下webpack#xff0c;今天这篇文章…
深入浅出Webpack2-快速掌握webpack基本配置1.Entry1.1 context1.2 Entry类型2.Output2.1 filename2.2 path3.Module3.1配置Loader4.Resolve4.1 alias4.2 extensions4.3 modules5.Plugin6.DevServer7.其他配置项上一篇文章我们快速上手认识了一下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:[{//命中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 CommonsChunkPluginrequire(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/目录下的文件默认为falseport配置服务监听的端口默认使用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~
