webpack 作为目前前端开发必备的框架。
webpack 发布了 2.0 版本，此视频就是基于 2.0 的版本讲解的，我上传到了优酷上供大家学习参考使用。
这个基本就是 webpack 2.0 最好的学习视频了，希望可以对新手或者复习知识的朋友有用。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

1.视频课程简介

• 什么是 Webpack
• Webpack 和 Gulp, Grunt, Browserify, Rollup, NPM Scripts
• 如何创建上线的 bundle
• 如何做 code splitting
• 如何做无用代码的清除
• 如何使用 tree shaking 做无用代码的清除
• 如何配置 hot module replacement (HMR)
• 如何配置 hot/live 加载
• 如何用 Babel 在生产模式下编写 ES6/ES.next/ES2015 代码
• 如何加载图片
• 如何加载样式 (CSS)
• 其他知识点

2.课程源码地址

https://github.com/emiloberg/webpack-tutorial

3.视频课程地址

优酷：http://v.youku.com/v_show/id_XMjYzNDU4NTg0MA==.html

优酷上传的超清版本，不过转码转不成超清版本，需要超清版本请点击这里：http://pan.baidu.com/s/1mimaTHQ

此文主要帮助大家解决 webpack-dev-server 启动后修改源文件浏览器不能自动刷新的问题。

1.webpack 不能热加载的问题

主要的问题是各个版本之间的兼容性问题，请在本地的项目配置文件 package.json 中直接拷贝下面的配置文件，然后完整删除node_modules 文件夹后，在项目文件夹下执行 npminstall 即可。注意 Mac 系统下需要在命令前加 sudo。
安装完成后执行 webpack-dev-server --inline --hot 即可正常自动刷新了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

{
  "name": "10-03",
  "version": "1.0.0",
  "description": "",
  "main": "root.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "antd": "^2.1.0",
    "babel": "^5.8.23",
    "babel-core": "^6.1.21",
    "babel-loader": "^6.1.0",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babelify": "^7.3.0",
    "css-loader": "^0.25.0",
    "fetch": "^1.1.0",
    "json-loader": "^0.5.4",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-mixin": "^2.0.2",
    "react-responsive": "^1.2.1",
    "react-router": "^2.8.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.0.1"
  }
}