初识 webpack

安装 node-sass

搜索：node sass github

github官网：https://github.com/sass/node-sass

命令行输入：

npm install node-sass -g

-g 表示全局安装

全局安装与局部安装的区别

• 全局安装的命令会将插件安装在全局目录中 (包含在$PATH中)，不论在哪个目录下都可以调用

• 局部安装只能在当前路径使用该命令

使用 node-sass

查看版本号

node-sass -v

sass 的用法

1. 更改CSS文件后缀为： scss

   命令行中的写法：mv style.css style.scss

2. 使用 sass 编译：node-sass style.scss style.css

也可以使用 scss 语法书写代码：

div { color: red;
    > ul { font-size: 16px;
        > li { border: 1px solid #000;
            > a { font-weight: bold; }
        }
    }
}

再运行 node-sass style.scss style.css 后编译的语法：

div {
  color: red; }
  div > ul {
    font-size: 16px; }
    div > ul > li {
      border: 1px solid #000; }
      div > ul > li > a {
        font-weight: bold; }

这样就是编译后的 CSS 了

自动化编译

在先前的命令后添加 -w 需要编译的文件名 例如：

node-sass style.scss style.css -w style.scss

这样代码就会实时编译了，不需要每次更改都去执行先前的命令

科普 scss 的 由来

sass 语法 (被前端程序猿看不懂) ：

body
    p
        color: red

于是编译为 scss 语法 (被前端程序猿看懂的) ：

body p {
  color: red; }

babel 用法

1. 官网的安装教程：https://babeljs.io/docs/en/usage

2. 安装后点击CLI查看命令行教程：https://babeljs.io/setup#installation

功能：为代码兼容IE8

使用：

./node_modules/.bin/babel js -d dist --watch

--watch 表示即时编译，这样就不需要每次更改源文件后执行一次编译，它会监听源文件，变动就会自动编译

前端目录分类

• src --- 全称 source 表示未经翻译优化的源代码
• dist --- 全称 distribution 表示要发布的代码
• vendors --- 名字就是全称 表示第三方代码
• node_modules --- 表示第三方包