您的位置：首页 > Web前端 > Webpack

原创超清的 Webpack2 视频教程

2017-04-06 09:14 525 查看

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.
视频课程简介

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

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

1.
webpack 不能热加载的问题

主要的问题是各个版本之间的兼容性问题，请在本地的项目配置文件

package.json

中直接拷贝下面的配置文件，然后完整删除

node_modules

文件夹后，在项目文件夹下执行

npm
install

即可。注意 Mac 系统下需要在命令前加

sudo

。

安装完成后执行

webpack-dev-server --inline --hot

即可正常自动刷新了。

{
"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 等。