首先肯定会问什么是 pug，如果是 nodejs 程序员的话，肯定听过 jade 吧，pug 就是 从 jade 改名过来的。 说白了，它就是可以让你以更好的语法来写 html 。 下面看看例子就会清楚的。 现在我们就要代替之前的 src/index.html 改用 pug 语…

相信这个话题很多人都感兴趣，这里就用几个简单的命令就可以搭建出 react 的开发环境。 1. 安装 react 要使用 react，就必须装下面两个包的。 2. 建立 babel 可能你不懂 babel 是什么，你可以把它理解为编译器，它能把 react 代码转成一般浏览器可…

1. webpack 是什么? 先来说一下 webpack 是什么。 如果这样还不明白的话，我们来说下前因后果。 在当今的社会，作为 web 开发，会越来越意识到前端的重要性，随着 HTML5、 CSS3、 ES6 各种技术的发展，前端的开发越来越宠大。甚至有些应用就是单页面应…

想一想，只要在 js 文件里，像 import React from 'react' 这样来处理应该就可以，我们来试一下。 首先，安装 jquery。 接下来来使用 jquery。 虽然 import 了，但是编译的时候，找不到 $ 这个标识符。 效果出来。 没啥问题，但这不是…

1. 什么是 loader 可能会一脸懵懂吧。 说白了，就是 loader 类似于 task，能够处理文件，比如把 Scss 转成 CSS，TypeScript 转成 JavaScript 等。 再不明白的话，还是用实例来说明吧。（其实它的概念并不重要，你会用就行） 2. 用 …

1. 前言 以前本系列教程的其中一篇文章 13. 生产环境 vs 开发环境 有写过如何处理开发和线上环境的配置的差异性问题，之前我们是用一个环境变量 NODE_ENV=production，这个环境变量是放在命令行中，作为命令行的一部分，比如 NODE_ENV=producti…

从字面上来想象，devtool 好像跟开发有关，source-map 好像跟 源码 或 地图 有关，与其去猜，我们不如通过实例来感受下它真正的意思。 下面我们开始来感受下 source-map 的魔力。 1. 先不使用 source-map 的情况 我们先在 js 里随便写一些…

之前我们已经可以转化 js 文件了，但是一般来说，我们放在网页上的是 html 页面。 现在我们就把 html 和 js 还有 webpack 结合来玩玩。 很简单，只要把 js 文件引入到 html 中就好。 1. 创建 index.html 这样，你在服务器上把这个 ind…

现在我们要先把 webpack 用起来。 为了方便，我们先用 npm 创建一个空项目。 1. 用 npm init 初始化项目 最后，你会发现 hello-webpack 目录下多出了一个名为 package.json 的文件。 整个 json 文件的内容很简单，主要是显示这个…