金山老师的笔记
1.ES6简介
- ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。
- 它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
- ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。日常场合，这两个词是可以互换的。
- ES6 从开始制定到最后发布，整整用了15年 2009年12月，ECMAScript 5.0版正式发布 2011年6月，ECMAscript5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。 2013年3月，ECMAScript6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。 2013年12月，ECMAScript6草案发布。然后是12个月的讨论期，听取各方反馈。 2015年6月，ECMAScript6正式通过，成为国际标准。从2000年算起，这时已经过去了15年。
附录：
ECMA是“European Computer Manufacturers Association”的缩写，中文名称为欧洲计算机制造商协会。是1961年成立的旨在建立统一的电脑操作格式标准（包括程序语言和输入输出）的组织。
2.ES6基础编程
2.1.let命令
ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
2.1.1.let命令存在块级作用域
if (true) {
var a = 10;
let b = 20;
}
console.log(a); //10
console.log(b); //Uncaught ReferenceError: b is not defined上面代码在代码块之中，分别用var和let声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。
那为什么需要块级作用域呢？ ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。 下面场景中，内层变量可能会覆盖外层变量。
var tmp = new Date();
function fn(){
console.log(tmp);
if(false){
var tmp = 'hello world';
}
}
fn(); //undefined上面代码中，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。
2.1.2.Let不存在变量提升
//var的情况
console.log(foo);
var foo = 2; //undefined
//let的情况
console.log(bar);
let bar = 2; //ReferenceError: Cannot access 'bar'上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。 变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。 因此，使用let声明变量，极大的消除了代码的潜在bug的隐患。
2.1.2.Let暂时性死区
只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
var temp = 123;
if(true){
temp = 'abc'; //ReferenceError: Cannot access 'temp'
let temp;
}上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。
2.2.const 命令
const声明一个只读的常量。一旦声明，常量的值就不能改变。
const PI = 3.1415926;
PI = 3; //TypeError: Assignment to constant variable.上面代码表明改变常量的值会报错。
2.3.字符串的扩展-模板字符串
传统的JavaScript语言，输出模板通常是这样写的:
<p id="result"></p>
<script>
let basket = {
count: 100,
onSale: 80
}
document.getElementById('result').innerHTML =
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!';
</script>前面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题
<p id="result"></p>
<script>
let basket = {
count:100,
onSale:80
}
document.getElementById('result').innerHTML =
`There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!`;
</script>注意：ES6模板字符串中必须要使用反引号。
2.4.函数的扩展rest参数
ES6 引入 rest 参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
function add(...values) {
let sum = 0;
for(var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10上面代码的add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数。
rest 参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量。下面是一个利用 rest 参数改写数组push方法的例子
function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
});
}
var a = [];
push(a, 1, 2, 3)rest数组展开
function push2( ... items){
return [10,20,...items];
}
var newarr = push2(1,2,3,4)
console.log(newarr); //[10, 20, 1, 2, 3, 4]
function push2( items){
return [10,20,...items];
}
var newarr = push2([9,2,3,4])
console.log(newarr);//[10, 20, 9, 2, 3, 4]2.5. 函数的扩展-箭头函数
ES6允许使用“箭头”（=>）定义函数：
//ES5定义函数
var f = function(v) {
return v;
};
//ES6定义箭头函数
var f = v => v2.5.1.箭头函数的语法
如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分
javascriptlet f = () => 5; // 等同于 let f = function() { return 5 }; let sum = (num1, num2) => { return num1 + num2; }; // 等同于 let sum = function(num1, num2) { return num1 + num2; };如果只有一个参数，那么圆括号就可以省略了
javascriptlet f = str => { console.log(str); } f('hello');如何函数体中的代码只有一句，那么大括号可以省略
javascriptlet f = str => console.log(str); f('hello');但如果函数体中的代码只有一个return语句，那么return关键词也必须省略
javascript//这是错误的 let sum = (num1, num2) => return num1 + num2; //这是正确的 let sum = (num1, num2) => num1 + num2;由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
javascriptlet getTempItem = id => ({ id:id, name:'Temp' })
2.5.2.使用箭头函数的注意点
箭头函数有几个使用注意点。
函数体内的this对象。
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
或者说：箭头函数当方法使用时没有定义this绑定，而是捕获所在上下文的 this ，作为自己的 this 。
html<button id="one">one点击(使用function)</button> <button id="two">two点击(使用箭头函数)</button> <script> var one = document.getElementById('one'); var two = document.getElementById('two'); one.onclick = function (){ console.log(this); //<button id="one">one点击(使用function)</button> } two.onclick = ()=>{ console.log(this); //window } </script>注意：
- 箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind()等。
- 普通函数的this指向调用它的那个对象。
不可以当作构造函数。
也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象。
该对象在函数体内不存在。如果要用，可以用Rest参数代替。
2.5.3.this指向问题测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>点击</button>
<script>
//指向Window，因为处于Window作用域中(或者说console本身就是window对象的函数)
window.console.log('script块：'+this);
//指向Window，因为处于Window作用域中(或者说if是声明在window对象中的)
if(true){
console.log('if块：'+this);
}
//指向Window，因为处于Window作用域中(或者说此函数是在window对象中的)
//注意：可以这样写：var fn = function(){}
// 但不能这样写：let fn = function(){}
var fn = function(){
console.log('函数中：'+this);
}
window.fn();
//指向Window，因为处于Window作用域中(或者说setTimeout本身就是window对象的函数)
window.setTimeout(function(){
console.log('setTimeout函数中：'+this);
},1);
//指向Button对象
document.getElementsByTagName('button')[0].onclick=function(){
console.log('button事件处理函数中：'+this);
}
var btnclick = function(){
console.log('btnclick：'+this);
}
document.getElementsByTagName('button')[0].onclick = btnclick;
/**
* 测试：点击按钮后，结果为：
* script块：[object Window]
* if块：[object Window]
* 函数中：[object Window]
* setTimeout函数中：[object Window]
* button事件处理函数中：[object HTMLButtonElement]
*/
</script>
</body>
</html>2.5.4.使用箭头函数简化回调函数
箭头函数的一个用处是简化回调函数
实例1：
let arr = [1,2,3];
// function函数写法
arr = arr.map(function(x) {
return x * x;
});
// 箭头函数写法
arr = arr.map(x => x * x);实例2：
let values = [5,2,8];
// function函数写法
let result = values.sort(function(a, b) {
return a - b;
});
// 箭头函数写法
let result = values.sort((a, b) => a - b);2.5.5.rest参数与箭头函数结合
let numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5) // [1,2,3,4,5]
let headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4, 5) // [1,[2,3,4,5]]3.ES6中的类（Class）
3.1. 类的基本语法
ES6提供了更接近面向对象（注意：javascript本质上是基于对象的语言）语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
//创建对象
let p = new Point(1,2);
console.log(p.toString());上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5的构造函数Point，对应ES6的Point类的构造方法。
Point类除了构造方法，还定义了一个toString方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错。
注意：生成类的实例对象的写法，要使用new命令。如果忘记加上new，像ES5函数那样调用Class，将会报错。
javascript// 报错 let point = Point(2,3); // 正确 let point = new Point(2,3);
3.2.constructor方法
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
constructor() {}注意：constructor方法默认返回实例对象（即this）
扩展：constructor方法默认返回实例对象（即this），但也可以指定返回另外一个对象。
class Point {
constructor(x, y) {
return new Date();
//return Object.create(null);
}
}
let p = new Point(); //返回为Date对象
console.log(p);Constructor与普通构造函数的区别： 类的构造函数，不使用new是没法调用的，会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
let p = Point(); //TypeError: Class constructor Point cannot be invoked without 'new'3.3.this与class（原型）
class：类，是对象的模板。（或者叫：原型） this：当前对象。 以上定义，与java中的概念是相同的。 但是，由于javascript语言自身的特点，关于class与this，还需要做进一步说明。
注意：在javascript中，在定义类完毕之后，还可以再添加属性和方法。
3.3.1.属性与方法添加到this上
class Point {
constructor() { }
}
let p = new Point();
p.username = 'zhangsan';
console.log(p.username); //zhangsan上面代码中，Point类定义之后，给对象 p 又添加了一个username属性。这是完全可以的。 但是要注意：此种方式，仅仅是给对象p添加一个属性，而不是给类添加一个属性。 或者说： 此种方式，仅仅是给对象p的this添加一个属性，而不是给类添加一个属性。
class Point {
constructor() { }
}
let p1 = new Point();
p1.username = 'zhangsan';
console.log(p1.username); //zhangsan
let p2 = new Point();
console.log(p2.username); //undefined上面例子中，只给对象p1添加了username属性，但没有给类添加属性。 所以，p2对象中并没有username属性。
3.3.2.属性与方法添加到类上
class Point {
constructor() { }
}
Point.prototype.username = 'zhangsan';
let p1 = new Point();
console.log(p1.username); //zhangsan
let p2 = new Point();
console.log(p2.username); //zhangsan上面代码中，使用 Point.prototype方式，给类添加属性。 这样，类的所有对象（p1、p2）就都有username属性了。
在javascript中，每一个类都有一个prototype，它就是类的原型，类的所有实例共享一个原型。如果想访问这个原型，可以使用proto指针
javascriptclass Point { constructor() { } } let p = new Point(); console.log(p.__proto__); //注意proto指针的写法 /** * 输出结果： * {constructor: ƒ} * constructor: class Point //这里证明：proto指针指向类的原型 * __proto__: Object */ class Point { constructor() { } } let p1 = new Point(); let p2 = new Point(); console.log(p1.__proto__===p2.__proto__); //这里证明：类的所有实例共享一个原型
实际上，由于ES5历史原因，程序员更喜欢称之为：属性与方法添加到原型上。
3.3.3.类的静态成员
class Point {
constructor() { }
}
Point.username = 'zhangsan';
let p = new Point();
console.log(p.username); //undefined
console.log(Point.username); //zhangsan上面代码中，直接使用 Point.username 方式给类添加一个属性，此种方式只是添加了一个静态属性，访问时，只能通过类名才能访问。
4.ES6中的模块化编程
4.1.为什么使用模块化
历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>上面是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中，不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口。
这种原始的加载方式暴露了一些显而易见的弊端
- 全局作用域下容易造成变量冲突
- 文件只能按照javaScripe的书写顺序进行加载
- 开发人员必须主观解决模块和代码库的依赖关系
- 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。
在 ES6 之后，ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
4.2.ES6模块化实现
模块功能主要由两个命令构成：export和import。 export命令用于规定模块的对外接口 import命令用于输入其他模块提供的功能
4.2.1.export 命令
export let firstName = 'Michael';
export let lastName = 'Jackson';
export let year = 1958;上面代码中，使用export命令对外部输出了三个模块。
let firstName = 'Michael';
let lastName = 'Jackson';
let year = 1958;
export {
firstName as f, //可以使用as关键字，重命名对外接口
lastName,
year
};上面代码是export命令的另外一种写法。 在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法（直接放置在let语句前）是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。
export function multiply(x, y) {
return x * y;
};
export class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return this.x + ',' + this.y;
}
};export命令除了输出变量，还可以输出函数、类（class）。
4.2.2.import命令
使用export命令定义模块对外接口后，其他 JS 文件就可以通过import命令加载这个模块。
javascriptimport { name, age, sex } from './module1.js‘ console.log(name + '\t' + age + '\t' + sex);上面代码的import命令，用于加载module1.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（ module1.js）对外接口的名称相同。
import命令可以使用as关键字，将输入的变量重命名。
javascriptimport { lastName as surname } from './profile.js';import命令具有提升效果，会提升到整个模块的头部，首先执行
javascriptfoo(); import { foo } from ‘./my_module.js';上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。
import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。
javascript// 报错 import { 'f' + 'oo' } from ‘./my_module.js'; // 报错 let module = ‘./my_module.js'; import { foo } from module; // 报错 if (x === 1) { import { foo } from './module1.js'; } else { import { foo } from './module2.js'; }如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次
javascriptimport './lodash.js'; import './lodash.js';上面代码加载了两次lodash，但是只会执行一次。
import语句是 Singleton 模式
javascriptimport { foo } from './my_module.js'; import { bar } from './my_module.js'; // 等同于 import { foo, bar } from './my_module.js';上面代码中，虽然foo和bar在两个语句中加载，但是它们对应的是同一个my_module实例。也就是说，import语句是 Singleton 模式。
4.2.3.完整实例
- profile.js文件
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export function jia(x, y) {
return x + y;
}
export function jian(x, y) {
return x - y;
}
export class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return this.x + '\t' + this.y;
}
}- app.js文件：
import {firstName,lastName,year,jia,jian,Point} from './profile.js'
console.log(firstName + '\t' + lastName + '\t' + year);
console.log(jia(1,2));
console.log(jian(1,2));
let obj = new Point(1,2)
console.log(obj.toString());注意： from './profile.js' 即使是在同一个文件夹中，也必须要写 ./
- index.html文件：
<script src="js/app.js" type="module"></script>4.3.模块的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
// circle.js文件
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
//main.js整体加载
import * as circle from './circle.js';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));4.4.export default 命令
使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
// export-default.js
export default function () {
console.log('foo');
}上面代码是一个模块文件export-default.js，它的默认输出是一个函数。
// import-default.js
import customName from './export-default.js';
customName(); // 'foo'上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。
注意：
- 一个js文件中，不能有两个export default命令。
- import命令后面，不使用大括号。因为只能写一个模块名。
export default命令用在非匿名函数前，也是可以的：
// export-default.js
export default function foo() {
console.log('foo');
}
// 或者写成
function foo() {
console.log('foo');
}
export default foo;上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
本章节基于 Webpack3.0 测试通过。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
接下来我们简单为大家介绍 Webpack 的安装与使用。
安装 Webpack
在安装 Webpack 前，你本地环境需要支持 node.js。
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
使用 cnpm 安装 webpack：
cnpm install webpack -g
创建项目
接下来我们创建一个目录 app：
mkdir app
在 app 目录下添加 runoob1.js 文件，代码如下：
app/runoob1.js 文件
document.write("It works.");
在 app 目录下添加 index.html 文件，代码如下：
app/index.html 文件
<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>接下来我们使用 webpack 命令来打包：
webpack runoob1.js bundle.js
执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件，成功后输出信息如下所示：
Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./runoob1.js 29 bytes {0} [built]在浏览器中打开 index.html，输出结果如下：
创建第二个 JS 文件
接下来我们创建另外一个 js 文件 runoob2.js，代码如下所示：
app/runoob2.js 文件
module.exports = "It works from runoob2.js.";
更新 runoob1.js 文件，代码如下：
app/runoob1.js 文件
document.write(require("./runoob2.js"));
接下来我们使用 webpack 命令来打包：
webpack runoob1.js bundle.js Hash: dcf55acff639ebfe1677 Version: webpack 1.12.13 Time: 52ms Asset Size Chunks Chunk Names bundle.js 1.55 kB 0 [emitted] main [0] ./runoob1.js 41 bytes {0} [built] [1] ./runoob2.js 46 bytes {0} [built]
在浏览器访问，输出结果如下所示：
webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。 在页面启动时，会先执行 runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。
LOADER
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。
cnpm install css-loader style-loader
执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。
接下来创建一个 style.css 文件，代码如下：
app/style.css 文件
body { background: yellow; }
修改 runoob1.js 文件，代码如下：
app/runoob1.js 文件
require("!style-loader!css-loader!./style.css"); document.write(require("./runoob2.js"));
接下来我们使用 webpack 命令来打包：
webpack runoob1.js bundle.js Hash: a9ef45165f81c89a4363 Version: webpack 1.12.13 Time: 619ms Asset Size Chunks Chunk Names bundle.js 11.8 kB 0 [emitted] main [0] ./runoob1.js 76 bytes {0} [built] [5] ./runoob2.js 46 bytes {0} [built] + 4 hidden modules
在浏览器访问，输出结果如下所示：
require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!，当然我们可以根据模块类型（扩展名）来自动绑定需要的 loader。 将 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改为 require("./style.css") ：
app/runoob1.js 文件
require("./style.css"); document.write(require("./runoob2.js"));
然后执行：
webpack runoob1.js bundle.js --module-bind 'css=style-loader!css-loader'
在浏览器访问，输出结果如下所示：
显然，这两种使用 loader 的方式，效果是一样的。
配置文件
我们可以将一些编译选项放在配置文件中，以便于统一管理：
创建 webpack.config.js 文件，代码如下所示：
app/webpack.config.js 文件
module.exports = { entry: "./runoob1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /.css$/, loader: "style-loader!css-loader" } ] } };
接下来我们只需要执行 webpack 命令即可生成 bundle.js 文件：
webpack Hash: 4fdefac099a5f36ff74b Version: webpack 1.12.13 Time: 576ms Asset Size Chunks Chunk Names bundle.js 11.8 kB 0 [emitted] main [0] ./runoob1.js 65 bytes {0} [built] [5] ./runoob2.js 46 bytes {0} [built] + 4 hidden modules
webpack 命令执行后，会默认载入当前目录的 webpack.config.js 文件。
插件
插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工。
webpack 自带一些插件，你可以通过 cnpm 安装一些插件。
使用内置插件需要通过以下命令来安装：
cnpm install webpack --save-dev
比如我们可以安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。
修改 webpack.config.js，代码如下：
app/webpack.config.js 文件
var webpack=require('webpack'); module.exports = { entry: "./runoob1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /.css$/, loader: "style-loader!css-loader" } ] }, plugins:[ new webpack.BannerPlugin('菜鸟教程 webpack 实例') ] };
然后运行:
webpack打开 bundle.js，可以看到文件头部出现了我们指定的注释信息。
开发环境
当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。
webpack --progress --colors
如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
webpack --progress --colors --watch
当然，我们可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
# 安装 cnpm install webpack-dev-server -g # 运行 webpack-dev-server --progress --colors
在浏览器打开 http://localhost:8080/ 输出结果如下：
