WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。
这段话有三个重点:
-
打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。
-
转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。
-
优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任
1、webpack的基本配置
1.1、entry(项目入口,打包的入口文件,一个字符串或者一个对象):entry:"./src/index.js"
1.2、output(出口文件,配置打包的结果,一个对象):
output:{ filename: "build.js" }
1.3、module(模块的处理):loader的配置主要在module.rules中进行,例如:
module: { rules:[{ test: /(\.jsx|\.js)/, //表示匹配规则,是一个正则表达式 use:{ //表示针对匹配文件将使用处理的loader loader: "babel-loader",