Slog77_前端工程化第一阶段GET！

ArthurSlog

SLog-77

Year·1

Guangzhou·China

September 18th 2018

ArthurSlog.com

GitHub: BlessedChild

NPMJS.com: arthurslog

掘金主页

简书主页

segmentfault

企者不立 跨者不行 自见者不明 自是者不彰 自伐者无功 自矜者不长

开发环境MacOS(High Sierra 10.13.6 (17G65))

需要的信息和信息源：

Webpack

Sass

Translation

Compiler

开始编码

上一次对页面做了布局，但是编码起来比较“硬”

不够严谨和简洁

可以采用css预编译（preprocessor）的方式来解决

这里需要到两个东西：

文件打包工具，简单点说，有点像Makefile/make 的作用一样，指导文件如何去组合

css预编译器（preprocessor），用在打包的过程中

关于css预编译器的承担的角色，举个栗子：

目前比较主流的css预编译器（preprocessor）有 Sass、Less、PostCSS、Stylus 等….

而打包工具有 webpack、Parcel、Gulp、Grunt、Babel（一些既能编译、又能打包）

废话一下，Babel使用比较广泛，主要是可以使用他来对js版本进行转换

还有再废话一下，以上这些“工具”都有js（nodejs）实现

我选择预编译器Sass和打包工具webpack来构造我的网站 ArthurSlog.com

一开始使用，可能会比较繁琐

无所谓

继续

使用Sass的文章，在我之前的一篇文章中有所提及

简单点说，就是你要使用新的语法写一个样式文件，然后使用Sass去处理这个文件，转换成标准的css文件

而 webpack，我应该也是有写过一篇文章介绍过的

简单点说，就是帮你去调用Sass去处理你的那个新的样式文件，然后把转换而成的标准的css文件和

html文件等所有资源打包成你想要的样子（一般是会打包成 一个html文件 + 资源文件）

css预编译器（preprocessor）如果自动帮你命名的时候，html文件里的id和class也必须同步更新，以相互关联起来

这部分是webpack来做的，我们需要写一个配置文件，来指导webpack如何去做

这里是Sass官方使用手册，https://sass-lang.com/guide

这里是webpack官方使用手册，https://webpack.js.org/guides/

参考着来

先来进入我的网站源码路径下

cd ~/Desktop/ArthurSlogWebsize

先来安装 webpack打包工具

sudo npm i webpack webpack-cli —save-dev

现在，webpack就被安装到 当前路径/node_modules/.bin/webpack下了

现在查询webpack的版本

./node_modules/.bin/webpack -v

结果如下：

每次都要./node_modules/.bin/webpack比较麻烦，我们来配置一下package.json文件（也就是npm环境配置文件）

sudo vim package.json

更新代码：

~/Desktop/ArthurSlogWebsize/package.json

更新了 15、16行

保存文件，退出vim编辑器

:wq

尝试一下npm命令

npm run start

你会得到

漂亮，差不多了，现在，我希望webpack能按照我的指示去做事，所以要给webpack一个配置文件（指导文件）

在当前路径下：

~/Desktop/ArthurSlogWebsize/webpack.config.js

对 webpack进行配置，指导webpack去获取./src/index.js 进行转换

然后转换好的文件命名为main.js，并存放在 当前路径/dist 下

So，调整一下文件结构，该新建文件夹的新建，该移动的移动

mkdir src dist server client

mv index.js /server

mv.js.html.css.json.md.jpg /client

sudo mv src/ dist/ /client

sudo rm -rf node_modules

cd client

sudo rm -rf package.json package-lock.json

sudo npm init -y

sudo npm i —save-dev webpack webpack-cli

sudo vim package.json

更新 package.json文件 如下：

~/Desktop/ArthurSlogWebsize/client/package.json

mv Markdown_Editor.html index.html style.css background.jpg markdown-it.js dist

cd ../server

sudo npm init -y

sudo npm i koa koa-static

sudo vim index.js

更新一下 index.js文件：

~/Desktop/ArthurSlogWebsize/server/index.js

ok，文件结构的调整告一段落了

在本机上测试服务器通过，记得需要修改一下端口号，不要是80

提交服务器的时候需要改成80端口

因为主页没有js脚本，所以直接使用webpack会打包一个奇怪的文件出来

我来写一个简单的脚本好了

~/Desktop/ArthurSlogWebsize/client/src/index.js

ok，为了测试，现在需要更新一下主页文件 dist/index.html

~/Desktop/ArthurSlogWebsize/client/dist/index.html

给标签 p 加了个id属性，以便在js里操控他

现在回到 ~/Desktop/ArthurSlogWebsize/client/ 路径下

sudo npm run build

直接用浏览器打开index.html文件

点击“技术分享”，“技术分享“会变成”v0.0.1“

ok，现在webpack可以正常打包js源码了，接下来就是调用Sass去转换scss文件

先 根据webpack官方文档，配置webpack配置文件，指导webpack去调用Sass

sudo npm i style.css css-loader —save-dev

这里呢，解释一下 css-loader会把css里面的媒体查询和url替换成import/require这样的形式的css文件，然后再交给style-loader

style-loader 会把css文件插进html文件里

讲到这里，发现本篇的内通已经过多了

剩下的先直接上代码，下篇继续说

~/Desktop/ArthurSlogWebsize/client/dist/index.html

调整文件结构

mv /dist/style.css /dist/background.jpg /scr

添加文件加载器

sudo npm i file-loader —save-dev

~/Desktop/ArthurSlogWebsize/client/src/index.js

更新 webpack配置文：

~/Desktop/ArthurSlogWebsize/client/src/index.js

ok，现在切换至 ~/Desktop/ArthurSlogWebsize/client/ 路径下

sudo npm run build

结果：

双击打开主页，测试一下，布局引用正常

点击“点击显示版本”，显示“V0.0.1”

我的网站已经同步更新，传送门：ArthurSlog.com

网站的源码已同步至 Github

下一步，在继续完善前端开发的工程化，并采用css预编译器（preprocessor）

至此，ArthurSlog.com —— ArthurSlog_Markdown前端工程化第一阶段 Get！。

如果你喜欢我的文章 欢迎点赞 留言

谢谢