16个demo,webpack+react搭配使用
首先教大家2个新技能
1.按照正常github地址情况下,你的github本身不能访问目录。
例如要访问vue-demo下的vueCpu文件夹:https://github.com/holidaying/vue-demo/vueCpu(显示404)但是在目录上加上tree/master/:https://github.com/holidaying/vue-demo/tree/master/vueCpu (master是分支名)就可以访问。
- 2.github目录的制作
- 明确一个问题。一个标题就是一个目录名称
- 写法[xx](#题目名称)#不能少
- 题目名称的写法规则:abc_demo-> abc-demo,Abc-Demo->abc-demo。即就是题目中所有可见字符空格,以及其他字符均用-连接,并且全为小写
步骤
首先,install Webpack 和 webpack-dev-server.
|
|
|
|
接下来就可以进行demo演示了.
|
|
用浏览器访问 http://127.0.0.1:8080.
什么是webpack?
Webpack 是前端的打包工具类类似于 Grunt and Gulp.但是有区别,因为它是模块化构建机制,Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。
更多信息.
它的配置文件是 webpack.config.js
.
|
|
有了webpack.config.js
,你可以不带参数使用webpack
|
|
一些命令行选项你应该知道。
webpack
– 构建文件webpack -p
– 发布webpack --watch
– 监听项目webpack -d
– 包含 source maps方便调试webpack --colors
– 让打包界面更好看
去构建你的项目, 你可以把启动项写进package.json
|
|
目录
- 单文件入口
- 多文件入口
- Babel-loader
- CSS-loader
- Image loader
- CSS Module
- UglifyJs Plugin插件
- HTML Webpack Plugin and Open Browser Webpack Plugin
- Environment flags环境变量
- Code splitting代码分割
- Code splitting with bundle-loader
- Common chunk提取公共文件
- Vendor chunk提取公共的第三方代码
- externals全局变量
- 热模块替代/热更新
- React router
Demo01: 单文件入口 (源码)
Webpack会入口文件进行打包成bundle.js.
例子, main.js
是单文件入口.
|
|
index.html
|
|
Webpack follows webpack.config.js
to build bundle.js
.
|
|
启动服务, 访问 http://127.0.0.1:8080 .
|
|
Demo02: 多文件入口(源码)
多个入口文件,实用于多个页面的应用
|
|
index.html
|
|
webpack.config.js
|
|
Demo03: Babel-loader (源码)
通过使用不同的loader,webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理(更多信息). 例如, Babel-loader Babel其实是一个编译JavaScript的平台可以将 JSX/ES6 文件转换成浏览器可以识别的js文件. 官方文档loaders.
main.jsx
is a JSX 文件.
|
|
index.html
|
|
webpack.config.js
|
|
在 webpack.config.js
, module.loaders
区域是用来分配loader的. 像上面的代码片段使用了 babel-loader
需要安装插件 babel-preset-es2015 和 babel-preset-react to 编译成 ES6 and React. 可以用query配置参数
|
|
Demo04: CSS-loader (源码)
Webpack 允许你在js文件中require CSS , 通过 CSS-loader来预处理css文件.
main.js
|
|
app.css
|
|
index.html
|
|
webpack.config.js
|
|
但是,你需要使用2中loaders来转换CSS 文件. 第一个是 CSS-loader 来读取CSS文件, 另外一个是Style-loader 是将style样式插入到html中。 中间用!连接
启动服务后, index.html
有内部样式.
|
|
Demo05: Image loader (源码)
Webpack 允许你在js文件中require图片 , 通过 url-loader和file-loader来预处理图片文件.
main.js
|
|
index.html
|
|
webpack.config.js
|
|
url-loader 转换图片文件. 如果图片的大小小于 8192 bytes,它将会转成base64位的地址; 相反, 它就是普通地址.
参数前是用?连接的
启动服务后, small.png
and big.png
将会有一下的地址.
|
|
Demo06: CSS Module (源码)
css-loader?modules
(the query parameter modules) enables the CSS Modules spec.
CSS Module可以开启全局变量和局部变量,:global(…)表示全局变量,可以在全局中使用样式(更多信息)
index.html
|
|
app.css
|
|
main.jsx
|
|
webpack.config.js
|
|
启动服务.
|
|
访问 http://127.0.0.1:8080 , 你将看到只有第二个 h1
是红的,因为它是局部, 同时 h2
是蓝色的, 因为是h2
全局的.
Demo07: UglifyJs Plugin (源码)
Webpack 可以去掉本身附加的东西,优化代码 UglifyJs Plugin will minify output(bundle.js
) JS codes.
main.js
|
|
index.html
|
|
webpack.config.js
|
|
启动服务后, main.js
将会压缩如下.
|
|
Demo08: HTML Webpack Plugin and Open Browser Webpack Plugin (源码)
这个例子需要加载三个插件
html-webpack-plugin 创建 index.html
,open-browser-webpack-plugin 打开浏览器
main.js
|
|
webpack.config.js
|
|
启动 webpack-dev-server
.启动这个需要node7版本以上
不用手写index.html
也不用手动打开浏览器 Webpack 可以为你做这些事.
Demo09: 设置环境变量(源码)
你可以利用环境变量来控制特定代码的输出
main.js
|
|
index.html
|
|
webpack.config.js
|
|
|
|
Demo10: Code splitting (源码)
对于大型项目,把所有代码编译到一个文件并不是有效的, Webpack 允许你把代码分成好多块. 特别是某种情况下,只需要个别代码这些块可以按需加载。
在commonjs中有一个Modules/Async/A规范,里面定义了require.ensure语法。webpack实现了它,作用是可以在打包的时候进行代码分片,并异步加载分片后的代码。用法如下:
require.ensure([], function(require){
var list = require(‘./list’);
list.show();
});
此时list.js会被打包成一个单独的chunk文件,大概长这样:
1.fb874860b35831bc96a8.js
可读性比较差。我在上一篇结尾也提到了,给它命名的方式,那就是给require.ensure传递第三个参数,如:
require.ensure([], function(require){
var list = require(‘./list’);
list.show();
}, ‘list’);
这样就能得到你想要的文件名称:
首先,你需要用 require.ensure
to 来定义一个分割的点. (官方文档)
|
|
require.ensure
告诉 Webpack ./a.js
应该从 bundle.js
中分离成一个单独的块
|
|
Now Webpack takes care of the dependencies, output files and runtime stuff. You don’t have to put any redundancy into your index.html
and webpack.config.js
.
|
|
webpack.config.js
|
|
地洞服务.
|
|
在界面上, 你感觉不到任何不一样的地方. 但是, Webpack 已经把 main.js
和 a.js
编译成(bundle.js
和 1.bundle.js
)的块。
Demo11: 通过bundle-loader进行代码分裂 (源码)
dem10是一种,另一种是利用bundle-loader.
|
|
require('bundle-loader!./a.js')
tells Webpack to load a.js
from another chunk.
Now Webpack will build main.js
into bundle.js
, and a.js
into 1.bundle.js
.
Demo12: Common chunk (源码)
利用webpack.optimize.CommonsChunkPlugin,你可以共通的组件,代码块分离出来
|
|
index.html
|
|
webpack.config.js
|
|
Demo13: Vendor chunk (源码)
利用ebpack.optimize.CommonsChunkPlugin,你可以把第三方库抽离出来
main.js
|
|
index.html
|
|
webpack.config.js
|
|
If you want a module available as variable in every module, such as making $ and jQuery available in every module without writing require("jquery")
. You should use ProvidePlugin
(官方文档).
|
|
插件会执行两次这个方法,第一次将公共的第三方代码抽离移到vendor的块中,这个过程之前也讲过会将运行时runtime也转移到vendor块中,第二次执行则是将运行时runtime抽离出来转移到manifest块中。这步操作解决了缓存问题。
这样处理,最后会生成3个打包文件chunk,app.js是业务代码,vendor则是公共的第三方代码,manifest.js则是运行时。
Demo14: Exposing global variables (源码)
webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。如果你想引入一些全局变量, 但是不想被加载处理, 你可以在 webpack.config.js
使用 externals
模块 (官方文档).
有时我们希望我们通过script引入的库,如用CDN的方式引入的jquery,我们在使用时,依旧用require的方式来使用,但是却不希望webpack将它又编译进文件中。
例子, data.js
.
|
|
We can expose data
as a global variable.
|
|
现在, 你可以require data
作为模块化引入进来使用. 但是实际上是一个全局变量
|
|
Demo15: 热模块替换/热更新 (源码)
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running without a page reload.
通过webpack-dev-server.你可以使用2中方式 来进行热模块替换
(1) Specify --hot
and --inline
on the command line
|
|
参数的意思:
--hot
: adds the HotModuleReplacementPlugin and switch the server to hot mode.--inline
: embed the webpack-dev-server runtime into the bundle.--hot --inline
: also adds the webpack/hot/dev-server entry.
(2) 修改 webpack.config.js
.
- 添加
new webpack.HotModuleReplacementPlugin()
to theplugins
模块 - 添加
webpack/hot/dev-server
和webpack-dev-server/client?http://localhost:8080
to theentry
模块
webpack.config.js
如下所示.
|
|
启动服务
|
|
访问 http://localhost:8080, 你可以在浏览器上看到 ‘Hello World’ .
不要关闭服务.打开终端找到 App.js
, 同时修改 ‘Hello World’ 为 ‘Hello Webpack’. 保存后,你就可以在浏览器上看到数据更新了
App.js
|
|
index.js
|
|
index.html
|
|
Demo16: React router例子 (源码)
利用webpack做的例子 React-router‘s 官方例子.
Let’s imagine a little app with a dashboard, inbox, and calendar.
|
|
|
|
参照文档
- Webpack docs
- webpack-howto, by Pete Hunt
- Diving into Webpack, by Web Design Weekly
- Webpack and React is awesome, by Christian Alfoni
- Browserify vs Webpack, by Cory House
- React Webpack cookbook, by Christian Alfoni
License
MIT