webpack 实践笔记入门（一）
[webpack官网文档地址]:（http://webpack.github.io/docs...）
[实践工程地址]: (https://github.com/silence717... )
本篇文章可切换到分支 step1查看源代码。
what is webpack?
官网对webpack的定义是MODULE BUNDLER，目的就是把有依赖关系的各种文件打包成一系列的静态资源。
简单分步实践
创建一个空文件夹，进入
cd /Users/silence/code/personal/webpack-practice全局安装 webpack
npm install webpack -g创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-practice</title>
</head>
<body>
</body>
</html>创建app.js
document.write('hello world!');
console.log('App loaded');执行webpack命令
webpack ./app.js ./bundle.js这个时候项目中多了一个bundle.js文件，使用script标签将其引入到index.html中
<script src="bundle.js"></script>在浏览器中打开index.html文件，页面出现 hello world! 文字。
动态打包文件
在正常开发过程中我们不断在修改app.js文件，所以得不断执行打包命令，这样及其不方便。
我们需要针对我们的修改及时作出响应处理。
为此创建一个webpack.config.js文件。
module.exports = {
entry: ['./app.js'],
output: {
filename: 'bundle.js'
}
};entry： 入口文件 使用哪个文件作为项目的入口
output： 出口文件 打包后的文件放在哪里
一、 使用watch模式：
webpack 提供了一个命令--watch，一直监听文件，只要有变化就自动执行打包命令。这样会有两个问题：
* 1. 我们访问的地址为本地文件地址。
* 2. 浏览器不能自动刷新。
二、 webpack-dev-server
为了在开发过程中优化开发体验，webpack提供了一个webpack-dev-server
全局安装
npm install webpack-dev-server使用webpack-dev-server启动
webpack-dev-server命令行出现
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/silence/code/personal/webpack
Hash: 3786f12b06517d34cf85
Version: webpack 1.13.2按照提示在浏览器中访问： http://localhost:8080/webpack... ，
如愿出现hello world！字样。
在app.js中随意更改输出内容并保存，会看到浏览器自动刷新并输出更改后的内容。
build多个文件
有两种解决方案
1 使用require.js，引入新模块到app.js中
创建login.js，文件内容：
console.log('login in');在app.js中引入
require('./login');备注一下，webpack原生支持commonJs规范。
运行dev-server，console中输出login.js的文件内容.
2. 在webpack-config.js中更改entry
创建utils.js文件，内容为：
console.log('utils.js file ...');修改entry的配置为：
entry: ['./app.js', './utils.js'],运行dev-server，console中输出utils.js的文件内容。
这就是webpacj的入门级使用，个人体验
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。