vue换成https_vue 学习记录八——webpack 1

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 文件夹下面。

7c7871724a19a3c303d748e2de330ebd.png

图1(入口、出口、转换器)

4bfe3a9a8a3ee1660abfe666616e52ee.png

图2(插件)

38245d58dba731fe76204f8ddc0bc734.png

图3(运行环境)

在学习中先学习官网文档,

英文比较好的可以到https://webpack.js.org/,

中文比较好的可以看:https://www.webpackjs.com/concepts/

视频系统学习:https://www.bilibili.com/video/av90152963?from=search&seid=17587616227697129887

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值