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

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

接着上一节来，我们要解决上一节所遇到的一个问题。 其实原理很简单，只要能区分出哪个是开发环境，哪个是生产环境就可以，只要判断是生产环境的时候就用，不是的话，就不用，就可以了。 我们来试一下。 1. 增加环境变量 分别是开发环境使用的 npm run dev 命令和生产环境使用的…

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

之前我们是这么做的，用了 html-webpack-plugin 这个插件来输出 html 文件。 上面的 excludeChunks 指的是不包含， chunks 代表的是包含。 这样就 OK 了。 先说这么多。

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

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

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

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