<!--
.sass后缀的文件名 比较老了 现在它的后缀名是.scss 其实他们是同一个东西 只是 后缀名发生了变化
以 .sass写的文件的内容是 他没有括号 没有分号 有点怪 它跟新为了.scss 就有了花括号 和 逗号了
body
color:red
font-size:12px
字体文件有 .svg .ttf .eot .woff .woff2 这些都是字体文件的后缀名
网页中 引入了太多的静态资源 会有这样的问题
1==》网页的加载速度变慢 因为会有很多的二次请求
它首页拿到网页中的 html标签 当他发现有srcipt或者src标签 等 标签 它就回去服务器去拿 如果静态资源多了 服务器就会变得很慢 一个网页要渲染出来 所以不止发送一次请求
2==》有处理错综复杂的依赖关系 如 bootstrap和jq之间的依赖关系
如何解决上述之间的问题：
1合并 压缩 精灵图 图片的Base64编码（它适用于小的图片） 图片的Base64编码的做法比精灵图更加的好，因它要发送0次青丘 而精灵图至少要发送一次青丘
2可以使用requireJS 也可以使用webpack可以解决各个包之间复杂的依赖关系
什么是webpack
webpack是一个前端的项目构建工具 它是基于node.js开发出来的一个前端工具
所以要使用webpack 首先要安装node.js
如何完美的而解决上述的两个问题
1使用Gulp 2webpack
1使用Gulp它是基于task任务的
2webpack 它是基于整个项目惊醒构建的 可以完美的实现资源的合并 打包 压缩 依赖
-->
<!--
安装webPack的两种方式
第一次全局安装 npm i webpack -g 第一次安装了之后以后就不需要在安装了
在项目根录中运行 npm i webpack --save-dev 安装到项目依赖中去
ps=》dist 目录 代表的是产品级的目录 直接给用户
语法 ul>li*10{这是第$li} 这是一种快的语法
-->
<!--
做一个各行变色的功能有4步骤
安装包描述文件 npm init -y 新版本的node会自带这个的
npm i jquery -S 安装jq 保存到依赖列表中去了 在E:vuekaifalib 5day-webpack-隔行变色>这个目录中去
05day-webpack-隔行变色目录下==》新建src目录 在src目录下 新建index.html文件 在src目录下新建mian.js文件
src目录下创建 imgs文件夹 和js文件夹
05day-webpack-隔行变色目录下==>创建dist目录
在mian.js文件中导入jq 导入的语法是 import ** from **它是es6中导入模块的方式
1 如 import $ from 'jquery' 注意大小写
从引入文件可以知道 首先是在自己的兄弟目录中去找 然后去父级目录的兄弟目录中去找 然后依次类推
下载cnpm i jquery -S
// 实现隔行变色的功能
$(function(){
$("li:odd").css("background","red")
})
在node.js中 你要是这样写的 const $=require("Jquery")
由于es6的import导包的方式台高级了 所以浏览器解析不了 所以import $ from 'Jquery'汇报错
所以需要webpack来惊醒转化
2在src下创建webpack.config.js文件配置如下
const path=require("path"); //路径模块
module.exports={
entry:path.join(__dirname,'./mian.js'), //入口文件 使用webpack要打包哪一个文件
output:{ //输出相关的配置
path:path.join(_dirname,'./dist'), //指定打包好的文件会输出到哪一个目录（dist)下去
// filename:"bundle.js" //指定打包好的文件的名称叫什么名字
}
}
3所以在index中的时候我们就引入被webpack编译好的js文件就可以了
<script src="../dist/testindex.js"></script>
4转化的语法是 webpack ./被编译的文件路径 ./新文件的路径 这是webpack运行的命令
webpack ./src/mian.js ./dist/testindex.js 在dist中被编译的文件是为testindex.js
webpack 能够处理的问题
webpack能够处理js文件之间的互相依赖关系
webpack能够处理js的兼容性问题 能装将es6的语法转化为es5的语法
E:vuekaifalib 5day-webpack-隔行变色> webpack ./src/main.js ./dist/yasuomain.js
Hash: 4cc4695e15064bd19a6f
Version: webpack 3.8.1
Time: 344ms
Asset Size Chunks Chunk Names
yasuomain.js 284 kB 0 [emitted] [big] main
[0] ./src/main.js 87 bytes {0} [built]
+ 1 hidden module
-->
<!--
如何实现时时跟新我写的代码 此时就需要有一个配置文件了 webpack.config.js这个文件 这个文件是在跟目录下哦
webpack是基于node去构建的 所以你的依法和node还是很相似的哦
在配置文件中需要手动的指定配置文件的入口和出口
-->
<!--
wabpack.config.js文件最基本的配置哦 文件在跟目录下哦
// 因为要对路径操作 所以你要引入path这个模块哦 对他进行操作哦
const path=require("path"); //路径模块
// 配置文件 暴露出去哦 // 手动的指定入口和出口
module.exports={
entry:path.join(__dirname,'被打包的文件.js'), //入口文件 使用webpack要打包哪一个文件
output:{ //输出相关的配置
path:path.join(__dirname,'./dist'), //指定打包好的文件会输出到哪一个目录（dist)下去
filename:"bundle.js" //指定打包好的文件的名称叫什么名字
}
}
当你配置好了之后 直接在 E:vuekaifalib 5day-webpack-隔行变色>webpack 输入webpack就行了 它就会自动帮你打包
此时还不行 你还需要写后面的代码 看12章
-->
<!-- 如何添加npm run dev 启动程序
下载npm i webpack-dev-server -S 在pack.json中添加 "dev": "webpack-dev-server"这一句 注意使用逗号隔开
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server" //添加这一句
},
本节实现的功能==》手动修改成自己想要的端口号 2并且自动打开浏览器哦
下载 npm i webpack-dev-server -S
在package.json中修改
将“script”:{ "dev":"webpack-dev-server --open --port 3000"}
解释==》 --open是自动打开浏览器 --port 3000将端口修改为3000
-->
<!-- 本节实现的功能==》
我们发现启动之后展示的不是一个具体的首页 而是一个目录 如何解决启动之后是一个具体的首页
将“script”:{ "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"} 这里有4个指令
解释==》 --open是自动打开浏览器 --port 3000将端口修改为3000 --contentBase src 以src为根目录 展示它里面的index.html这个文件
--hot实现局部的跟新 你修改了哪里就跟新哪里 效率跟高了 它能够实现网页不重载(那个圈圈不会刷新) 就可以实现页面跟新
-->