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

这节主要来实践如何加载和打包 Twitter Bootstrap 框架。 1. 准备工作 先来复制一些 bootstrap 的代码片断。 注意，本节使用的是 bootstrap 3，因为目前写这篇文章时，bootstrap 4 还没出正式版，所以我们用 bootstrap 3。…

现在我们来学习一个最常用的插件 webpack-dev-server，一般来说，这个插件，大家都会用，特别是开发环境下。 我们之前使用 webpack -d --watch 来在开发环境下编译静态文件，但是这个功能，完全可以用 webpack-dev-server 来代替。 除…

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

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

在命令行中运行 webpack 命令确实可以实现 webpack 的功能，但是我们一般不这么做，我们要用配置文件来处理。 我们把之前学到的知识用 webpack 的配置文件来实现，配置文件的名字叫 webpack.config.js 位于项目根目录下。 1. 创建配置文件 we…

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

1. 安装 nodejs 要使用 webpack，必须确保电脑上存在着 nodejs 这个运行环境，所以，如果没有 nodejs，要先安装它。 下载安装包后，点击可执行文件，不断地按下一步，就可以安装成功。 最后打开命令行终端，输入以下命令。 这样就表示电脑上有 nodejs …

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