webpack是咱们的构建打包器,有二层含义,构建、打包。构建就如同组装,将各式各式的部件(插件、程序)有序组合,使各部件尽职尽责后形成强大的功能体,构建器需要有包容性、有规则,如同国家,得法律道德基础上,包容所有合法的行为,鼓励创造、创新,新生态。打包就是将各部件组装完成后进行最小最便利最独立模式输出,如同工厂的产品,最求着轻、美、实。
webpack有五件套(仅比床上四件套多一件)是:入口(entry)、出口(output)、转换器(loader)、插件(plugins)、模式(mode)。
1、入口(entry):就是在您的项目中,最先执行的js文件,一个项目可以仅有一个入口也可以有多个入口,在vue手脚架搭建好的项目中,默认配置在:build/webpack.base.conf.js文件中;
2、出口(output):就是您开发项目完成后终极打包文件存放的位置,在vue手脚架搭建好的项目中,默认配置在:build/webpack.base.conf.js文件中;
3、转换器(loader):也是翻译器,用于配置需要将浏览器无法识别的语法转换成浏览器可以识别的语法,例如less、sass、es6 转换为es5 语法(babel)等;配置在module节点下面,一种文件配置一个对象;在vue手脚架搭建好的项目中,默认配置在:build/webpack.base.conf.js文件中;
4、插件(plugins):插件是用于完成独立功能的js模块,例如我们自己封装的插件,例如HtmlWebpackPlugin,在vue手脚架搭建好的项目中,默认配置在:build/webpack.dev.conf.js(webpack.prod.conf.js)文件中;
5、模式(mode):我们项目的运行环境,分为开发环境或者生产环境。如果是开发环境配置值为development、如果是生产环境配置值为production, 测试环境配置值为testing,在vue手脚架搭建好的项目中,默认配置在config 文件夹下面。
图1(入口、出口、转换器)
图2(插件)
图3(运行环境)
在学习中先学习官网文档,
英文比较好的可以到https://webpack.js.org/,
中文比较好的可以看:https://www.webpackjs.com/concepts/
视频系统学习:https://www.bilibili.com/video/av90152963?from=search&seid=17587616227697129887