初识 webpack

作者: Mr_LvHeng | 来源:发表于2019-08-07 16:48 被阅读2次

安装 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 --- 表示第三方包

相关文章

  • 初识webpack4.x(一)

    系列文章 初识webpack(一) 初识webpack(二)之常用插件配置 初始webpack(三)之环境分离终结...

  • webpack 初识

    1.Webpack是什么,它有什么作用 把你的项目当做一个整体,通过一个给定的主文件(如:index.js),We...

  • 初识Webpack

    标签(空格分隔): 前端 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依...

  • 初识 webpack

    1. 初始化项目 首先,让我们用命令行创建一个名为 webapp 的项目文件夹,初始化 npm,本地安装 webp...

  • webpack初识

    webpack-demo Git Repowebpack-API Concepts 概念 At its core,...

  • 初识webpack

    今天有空,刚好学习了一点webpack相关的知识,在这里整理一番。 下面会给上我的GitHub,里面有6个小dem...

  • webpack 初识

    webpack 构建流程 初始化参数,从配置文件和 shell 语句中读到的参数合并,得到最后的参数 开始编译:用...

  • webpack初识

    1. webpack是什么? webpack是一个模块化开发的打包工具,基于nodejs开发的 2. webpac...

  • webpack初识

    首先我们通过一个简单的例子,让webpack去解析es module html index.js header.j...

  • 初识webpack

    1 webpack是什么? Webpack是一个开源的JavaScript模块打包工具,其最核心的功能是解决模块之...

网友评论

    本文标题:初识 webpack

    本文链接:https://www.haomeiwen.com/subject/hdhadctx.html