100 分钟 webpack 2.0 入门视频教程

http://blog.parryqiu.com/2017/04/05/webpack2-tech-lesson/?utm_source=tuicool&utm_medium=referral

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

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

1. 视频课程简介

什么是 WebpackWebpack 和 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 不能自动刷新的问题

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

1. webpack 不能热加载的问题

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

1234567891011121314151617181920212223242526272829303132333435 { "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" }}

这是我免费发布的高质量超清「Webpack 2 视频教程」。 Webpack 作为目前前端开发必备的框架，Webpack 发布了 2.0 版本，此视频就是基于 2.0 的版本讲解的。 这个基本就是目前国内最好的 Webpack 2.0 最好的学习视频了，希望可以对新手或者复习相关知识的朋友有用。

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

1. 视频课程简介

001 - Webpack 简介002 - NodeJS 安装与配置003 - Webpack 项目初始化004 - Webpack 初体验005 - Webpack 编译输出日志006 - 使用快捷方式进行编译007 视频即将更新

2. 课程源码地址

https://github.com/ParryQiu/DevOpenClub-Tech-Webpack2

3. 视频课程地址

优酷超清视频播单：http://list.youku.com/albumlist/show?id=49394464&ascending=1&page=1

课程更新地址：http://tech.parryqiu.com/lesson/webpack2.html