关于Webpack的的认识及傻瓜式教学
刚学习了Webpack,ememememememememem就赶脚是一个打包工具,将js、css、json、img等等通通打包为最终的文件,最后渲染为一个页面。
也是终于捋清了Webpack的思路,在这里分享一下:
学习Webpack之前首先要知道Webpack是什么?它有什么作用?
Webpack是一个前端资源打包工具
Webpack它会将你的项目看作是一个整体,通过一个给定的主文件,寻找到所依赖的所有分支文件,通过lorder处理为浏览器能够识别JavaScript文件
知道它的作用之后我们就需要在nodejs来操作了
首先我们在一个新文件夹中来利用nodejs创建package.json文件
在nodejs中输入 npm init创建,如下图:
创建完毕之后,我们再安装Webpack
首先是全局的安装(注:我安装的是3.8.1的版本),如下图:
输入的指令为:npm install -g webpack@3.8.1
然后我们在下载当前的文件下:
指令为:npm install webpack@3.8.1
这种局部下载和全局下载是一样的,一个是在任何地方都可以使用,一个只能在当前文件下使用,就不贴图了。
这下我们就可以打包js文件了,打包的指令为 webpack 入口文件名称 出口文件名称
其中index.js为入口文件 rundle.js为出口文件
这就完成了js文件的打包,但是这种打包指令如果有多个js的话会比较麻烦,这就需要我们用一种快捷方式来将它打包,这时我们就需要配置一个webpack.config.js文件,在文件夹中创建此文件,然后再里面配置内容,如下图:
这时我们在nodejs中输入webpack,就会发下dist文件下有一个打包出来的js文件
这样我们就完成了js文件的打包,接下来我们对css文件的打包,这时我们需要下载css打包所需要的文件:
在nodejs输入如下指令:
npm install style-loader css-loader --save -dev
如上我们下载完毕之后,在webpack.config.js文件中添加如下指令:
这样我们可以将css文件打包了,还可以将json文件、img图片打包(暂时还没学习,后续将会更新)
接下来我们在来说一下热加载,就是将文件内容改变之后保存就会自动改变打包后的文件,不需要再进行繁琐的配置
还是需要先下载:
在nodejs输入如下指令:
也是如上需要一遍全局下载,一遍局部下载
npm install webpack-dev-server@2.9.4
配置完毕之后我们还需要在packjson中文件中添加如下代码:
接下来在nodesj中输入指令npm run dev,就可以启动了
然后我们创建一个app.css文件、index.html文件和aaa.js文件,在css中输入body:{background:red},将css文件和js文件打包,引入到html文件中
注意:在html中引入的js文件为虚拟js文件,只是方便我们做项目时使用,最后我们将所有工作都做完以后再打包的js文件,才会使用真实文件
最后我们在浏览器中打开html文件,输入localhost:8080/文件名称(注意:8081为nodejs中启动服务器时给出的地址)
然后我们改变css样式,保存之后浏览器就会发生相应的改变,其它文件相同。
不用这种方式的话,改变一次css或js样式就需要重新打包一次文件,相对来说较为繁琐。
以上如有错误的地方还请见谅!
最新文章
- Oracle笔记2-数据库设计
- css text-align-last设置末尾文本对齐方式
- DataTable转换为List<;T>;或者DataRow转换为T
- 自己动手编译hadoop-2.5.2源码
- Counting Squares[HDU1264]
- 为了让vi命令也可以使用vim的配置,需要修改 vi /etc/bashrc 增加一行 alias vi=&#39;vim&#39;此时,经过上面配置已经可以显示语法高亮了
- bzoj 2510: 弱题 循环矩阵
- 5.7.13mysql 无法登陆
- JavaScript一看就懂(3)数组
- Git 转载
- PHP7 MongDB 安装与使用
- 使用hashlib进行登录校验
- nmap常用参数
- git的reset的理解
- How to Change MAC Address on Ubuntu
- .NET MVC 两种视图引擎(Razor、Aspx)
- 满帮集团CEO:未来将向“智慧型”公司转变,要成为一家生态公司
- 【BZOJ-3123】森林 主席树 + 启发式合并
- swift - 各种手势用法大全
- ptyhon基础篇 day1
热门文章
- jQuery_DOM学习之------包裹元素的方法
- [USACO08NOV]时间管理Time Management
- openjudge6252 带通配符的字符串匹配
- Gym100812 L 扩展欧几里得
- 前端自动化测试工具--使用karma进行javascript单元测试(转)
- GitHub现VMware虚拟机逃逸EXP,利用三月曝光的CVE-2017-4901漏洞
- Python进阶系列之怎么写出pythonic的代码
- CentOS 5.11开启VNC Service
- Apache2 Web 服务器
- 通讯编程入门--WEBSOCKET