【webpack4.0】---webpack的基本使用(一)
一、初识webpack
1、什么是webpack?
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用
2、webpack工作的方式
把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件
3、作用
模块化:让我们可以把复杂的程序细化为小的文件;
打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。
转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。
优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化
和提升性能的责任。
二、webpack与gulp、Grunt的区别
webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具
三、webpack的打包流程
webpack是建立在module之上进行打包的
四、webpack基本配置
五、webpack4.0的安装
1、全局安装
cnpm install webpack webpack-cli -g
注意:不建议全局安装。
2、局部安装
npm init //初始化项目
cnpm install webpack webpack-cli -D // -D等价于--save-dev
3、webpack-cli的作用
可以让我们在命令行中正确的使用webpack 以及npx webpack 等命令 如果不安 装则无法使用
4、文件编译
npx webpack index.js
5、npx
npx :会帮助我们在当前目录下面的node_modules包中找到webpack进行使用
npx webpack -v //查看webpack版本号
npx info webpack //查看webpack以往的一些版本号
npx webpack <文件名称> //文件编译
六、预热:文件编译
1、webpack默认是基于webpack.config.js进行打包的,如果需要指定其他文件名称
进行打包可以按照如下这样书写
npx webpack --config <文件名称>
2、npm scripts
如果在npm scripts中使用webpack的情况下会优先在工程目录下面的 node_modules中找相关的依赖
如果我们的编译命令过于复杂那么我们可以在package.json中的scripts中进行简化
配置
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}
运行命令的时候只需要npm run <命令名称即可>
3、webpack打包环境
module.exports = {
mode:"production" //生产环境
model:"development"//开发环境
}
4、预热打包配置
1、npm init -y 生成一个node包
2、局部安装webpack
3、建立webpack.config.js
4、配置webpack.config文件
output:{
//占位符 满足线上地址的需求
publicPath:'html://cdn.com/'
}
七、什么是开发环境、测试环境、生产环境
1、开发环境:项目尚且在编码阶段,我们的代码一般在开发环境中 不会在生产环
境中,生产环境组成:操作系统 ,web服务器 ,语言环境。 php 。 数据库 等等
2:测试环境:项目完成测试,修改bug阶段
3:生产环境:项目数据前端后台已经跑通,部署在阿里云上之后,有客户使用,
访问,就是网站正式运行了。
三个环境也可以说是系统开发的三个阶段:开发->测试->上线
4:--save && --save-dev的区别
可分别将依赖(插件)记录到package.json中的dependencies和 devDependencies 下面。
dependencies下记录的是项目在运行时必须依赖的插件,常见的例如react jquery 等即及时项目打包好了、上线了,这些也是需要用的,否则程序无法正常执行
devDependencies下记录的是项目在开发过程中使用的插件,一旦项目打包发布、 上线了之后,devDependencies中安装的东西就都没有用了
如果模块是在开发环境中使用,那么我们安装依赖的时候需要--dev
飞机票:https://mp.weixin.qq.com/s/g6tUSLy0f40pmFnfO3QykA
最新文章
- .Net中Remoting通信机制
- Xcode 7 App Transport Security has blocked a cleartext HTTP 报错解决办法
- C#综合笔记
- JavaScript中this和$(this)之间的区别以及extend的使用
- CSS 实现加载动画之七-彩环旋转
- php 怎么设置报错级别 和 控制报错[转]
- 走出测试,走向CEO
- STL之迭代器
- 【BJG吐槽汇】第一期 - 警惕亚马逊莫名自动扣款!千万不要进了它的坑!
- EF初始化mysql数据库codefirst
- JavaScript高级程序设计45.pdf
- css3 tranform &#160;transition animation
- Cocos2d-x Layout简单使用
- 重载 vs 重写
- inheritprototype原型继承封装及综合继承最简实例
- 【Android Developers Training】 66. 添加动画
- php操作excel表格的导入和导出
- BeautifulSoup库的使用
- 基于PLC1850平台的ICMP包请求与响应
- 在powerDesigner中通过SQL生成pdm
热门文章
- 深入理解Akka Actor模型
- 【LeetCode】666. Path Sum IV 解题报告 (C++)
- 【LeetCode】949. Largest Time for Given Digits 解题报告(Python)
- Lucky Substrings
- Sum(hdu4407)
- RabbitMQ学习笔记二:Java实现RabbitMQ
- Chapter 5 Interaction
- MacOS使用IDEA+Maven+Scala+Spark进行本地调试
- 为什么操作dom会消耗性能
- JDK_win10环境下安装JDK8时点击下一步没反应的解决办法