2018-03-27 初识webpack

什么是工程化
：自动化、模块化、性能优化
scss → sassy css
先玩一下scss （ruby社区发明的）
搜node scss github

image.png

也可用yarn

image.png
加-g表示全局安装，在哪里都可以使用

用npm安装时，基本上会失败，搜node sass 安装失败

image.png
https://github.com/lmk123/blog/issues/28
这个可以解决， image.png
image.png
如果安装成功了测试下
image.png
测试失败，结果为安装失败

换一种，用yarn来下载

image.png

直接改项目里的a.css的后缀为a.scss
scss完全兼容css语法

image.png
把a.scss翻译成a.css

学习下scss
里面可以进行嵌套
比如
.topNavBar nav {
padding-top: 4px;
padding-bottom: 3px;
}
可以写成
.topNavBar{
nav {
padding-top: 4px;
padding-bottom: 3px;
}
}

修改完之后再翻译下

image.png
image.png

sass和scss有什么区别？
前端太low
ruby社区发明了sass，比如

image.png

翻译一下就是

image.png
image.png
再比如 image.png
image.png

前端说看不懂，ruby于是又发明了一套scss，比如加括号、加分号

image.png
html里直接引用.scss可以不？不行，因为浏览器不认识，只认识.css
那每次在.sass里修改了之后，都需要翻译下，那能不能自动翻译呢？
语法
image.png

IE不知let
需要一个工具自动的让let变成IE支持的var
这种工具叫做babel

image.png
image.png
image.png
image.png

需要一个package.json
用npm init来实现一个合法的package.json
然后

image.png
这个时候package.json里就多了一句 image.png
image.png
第3步， image.png
在package.json的scripts里加"build": "babel src -d lib"
image.png
image.png

执行之后会报错，我们执行npm run build的时候，其实是在执行"build": "babel src -d lib"这段代码

这个babel是局部安装的，安装在 image.png 下
image.png

全局安装和项目安装的区别
新建一个目录

image.png
image.png
image.png

安装在上面的目录了
没有-g就是安装在当前目录

image.png
image.png
把全局安装删掉 image.png

使用局部http-server

image.png

因为babel是局部安装的，所以运行命令时，要把路径补全

image.png

这里src是个目录，表示把src目录里的js全部翻译成IE可以用的js
把生成的代码都放到目标路径lib里面
这里我们改下路径

image.png image.png

lib目录下的message.js里的let就被换成了var
命令里的-d就是desdination，目的地
这个时候把index.html里的js代码路径改下

image.png

如果js里的js有修改，怎么办？需要自动翻译成dist里的js才是我们需要的

image.png
后面加个--watch
image.png
问题：要多开一个进程，监视文件的改动

前端有没有目录规范？
src：未经翻译的代码
dist：待发布的代码
vendors：第三方库放的地方
node_modules：第三方包

翻译并监听

image.png

o是output的意思

js进行翻译并监听

image.png

接下里问题：dist里没有html的
即如何监听html，并且观察到其变更后，自动拷贝到dist目录下
所有的文件都需要从src拷到dist下
搜watch cli
安装

image.png
image.png
image.png
image.png

接下来监控图片

image.png

监控js

image.png
监控css
image.png

监控html

image.png
image.png

以上很麻烦（就是用翻译工具把CSS（各种sass、css、Less等）和js（各种es5、es6）等翻译为IE能运行的代码）
以及比如在dist/目录下的index.html的css路径希望自动能加入版本号，一旦改了css，希望能自动的修改版本号

有没有其他工具能代替这些窗口监控？一开始是Grunt、然后是Gulp、然后是webpack

image.png

https://github.com/webpack/webpack
先把package.json里的依赖删掉

image.png

也可以直接删掉，然后重新npm init

image.png
image.png
然后
image.png
安装完之后，就多了个依赖
image.png
image.png
image.png
更多配置文件及内容请进入https://github.com/tsl1127/resume_webpack