为啥要用 webpack
sass
为了更快更方便的编写 css 代码你是有可能使用 sass 等等,但是很明显的你不可能在 html 中直接的应用 sass,你必使用进行了转译才可以啊。
1 | node-sass input output |
但是每一次更改都要重新转译很麻烦,所以一般就是
1 | node-sass input output -w |
以上 intput output 都是原文件地址。
注意点:我是在 linux 系统上的,大家按照官网做就好,但是你要知道这是一个玄学。
babel
有了 babel 你可以畅快的敲代码而不管 ie 是否兼容,babel 会帮你完成的。
1 | ./node_modules/.bin/babel src -d lib |
src 原地址 lib 目的地址,对 shell 不熟悉的我懵逼了几分钟,要花点时间看看 shell 了。
为了自动化的编程当然要监视是否进行了更改啊
1 | ./node_modules/.bin/babel src -d lib -w |
不过当时是有问题的,通过 google 在 stackoverflow 解决
好了看到这两个小东西是不是感觉自己的时间会大大减少啊,小吊的样子,但是如果开很多的监视窗口是不是会觉得很烦啊
这个时候就有了 webpack 当然他前面还有 gulp 等自动化工具,可惜屎了,我想想webpack 这个玄学的东西很有可能也后不久了。
webpack
玄学的东西
别看中文文档,至少你的看看英文的再看中文有没有大的区别,至少我看的时候差别不是一般的大。
然后就可以 google 搜索 webpack sass/babel 你就会得到 sass loader 和 babel loader 按着 github 官方文档走没啥问题的。
每次 webpack 会自动帮你完成之前你要自己完成的步骤,你可以这样
1 | npx webpack -w |
如果你看到 bundle.js 中的代码为一行是因为 webpack 4 的模式默认为生产者模式,你只要改成开发者模式即可。