安装 webpack
通过 npm 命令,全局安装
- $ npm install webpack - g
或者
- $ npm install webpack
- --
- save
- -
- dev
如果需要使用不同的版本 Webpack,可以
- $ npm install webpack@1
- .
- 2.x
- --
- save
- -
- dev
Webpack 命令
让我们以一个实例,来描述如何使用 Webpack 命令。假如,我们有下面的 js 文件
- var
- cats
- =
- [
- 'dave'
- ,
- 'henry'
- ,
- 'martha'
- ];
- module.exports = cats;
- cats
- =
- require
- (
- './cats.js'
- );
- console.log(cats);
调用 Webpack 命令生成 output 文件
- webpack
- .
- /
- app
- .
- js app
- .
- bundle
- .
- js
Webpack 通过分析 entry point 文件,发现并找到文件所依赖的所有模块,然后将它们归集在一起,形成最终的 output 文件 - app.bundle.js。下面的图形,描述了它的具体执行过 (Entry Point 可以理解成程序的起始点,而 Webpack 也是从这里来分析模块间的依赖关系的。)
点击查看大图
除了使用命令行来调用 webpack 外,还可以通过配置文件的形式。那麽,接下来我们就来说说如何配置 webpack 。
webpack.config.js 是 webpack 的默认配置文件(也可以通过--config 配置其他文件)。
- module
- .
- exports
- =
- {
- entry: './main.js',
- output: {
- filename: 'bundle.js'
- }
- };
或者多个 Entry point
- module
- .
- exports
- =
- {
- entry: {
- Profile: './profile.js',
- Feed: './feed.js'
- },
- output: {
- path: 'build',
- filename: '[name].js' // Template based on keys in entry above
- }
- };
Webpack 的配置文件其实是一个 CommonJS 形式的 javascript 文件。
Webpack 中的 loader
点击查看大图
- module
- .
- exports
- =
- {
- entry: './main.js',
- output: {
- filename: 'bundle.js'
- },
- module: {
- loaders: [{
- test: /\.coffee$/,
- loader: 'coffee-loader'
- },
- {
- test: /\.js$/,
- loader: 'babel-loader',
- query: {
- presets: ['es2015', 'react']
- }
- }]
- },
- resolve: {
- // you can now require('file') instead of require('file.coffee')
- extensions: ['', '.js', '.json', '.coffee']
- }
- };
还有其他的一些 loader,比如可以通过使用 json-loader,将 JSON 文件转换成 CommonJS 模块
点击查看大图
Loader 的调用是连续的。Webpack 提倡一个 loader 只完成与它相关的任务,或者单一的任务。我们可以通过组合的形式将多个 Loader 连接起来。
例如,通过用 yaml-loader 先将 YAML 文件转换成 JSON 格式,再通过 json-loader,转换成 CommonJS 模块
点击查看大图
编译 CSS, image, font 等资源文件
通过使用 style-loader, url-loader ,可以将 css , image , font 等资源文件编译成为 javascript 模块。例如
- module
- .
- exports
- =
- {
- entry: './main.js',
- output: {
- // This is where images AND js will go
- path: './build',
- // This is used to generate URLs to e.g. images
- publicPath: 'http://mycdn.com/',
- filename: 'bundle.js'
- },
- module: {
- loaders: [
- // use ! to chain loaders
- {
- test: /\.less$/,
- loader: 'style-loader!css-loader!less-loader'
- },
- {
- test: /\.css$/,
- loader: 'style-loader!css-loader'
- },
- // inline base64 URLs for <=8k images, direct URLs for the rest
- {
- test: /\.(png|jpg)$/,
- loader: 'url-loader?limit=8192'
- }
- ]
- }
- };
生成 chunk 文件
使用 CommonsChunkPlugin ,我们可以将应用中被多次引用到地文件或者方法,提取到一个文件中来
- var
- webpack
- =
- require
- (
- 'webpack'
- );
- var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
- module.exports = {
- entry: {
- Profile: './profile.js',
- Feed: './feed.js'
- },
- output: {
- path: 'build',
- filename: '[name].js' // Template based on keys in entry above
- },
- plugins: [commonsPlugin]
- };
Webpack-dev-serve 是 NodeJS 下的小型 Express 服务器,我们可以使用它来测试 webpack 所生成的文件。同时它通过 websocket 与服务器建立通信,支持对模块的代码监控,从而在文件变动时,动态的编译程序并自动刷新页面。
安装 webpack-dev-server
$ npm install webpack-dev-server --save-dev
webpack-dev-serve 的刷新方式
Iframe mode
Iframe 的形式并不需要修改配置文件。只需要在访问时调用 http://:/webpack-dev-server/> 它的特点是
Inline mode
Inline 的形式,是将部分 web-dev-server 的客户端代码,嵌入到 webpack 模块当中。支持命令行(--inline)或者配置文件(devServer: { inline: true })。
访问时调用 http://:/> 的特点是
配置 webpack-dev-server
- module
- .
- exports
- =
- {
- ....
- devServer: {
- historyApiFallback: true,
- hot: true,
- inline: true,
- progress: true,
- },
- ...
- }
然后再 package.json 里面配置一下运行的命令, npm 支持自定义一些命令
- "scripts":
- {
- "start": "webpack-dev-server --hot --inline --host 0.0.0.0 --port <port>"
- },
在命令行运行如下命令
- $ npm start
打开浏览器,访问 http://localhost:<port>
设置 proxy server
通过 http-proxy-middleware 组件,将请求转发到其他第三方服务器上。这样做的好处就是,让前后端并行的开发而不相互影响。例如
- proxy
- :
- {
- '/api': {
- target: 'https://other-server.example.com',
- secure: false
- }
- }
- // In webpack.config.js
- {
- devServer: {
- proxy: {
- '/api': {
- target: 'https://other-server.example.com',
- secure: false
- }
- }
- }
- }
- // Multiple entry
- proxy: [
- {
- context: [
- '/api-v1/**',
- '/api-v2/**'
- ],
- target:
- 'https://other-server.example.com',
- secure: false
- }
- ]
在实际的应用中,有时候我们只是希望将部分请求(例如 web service 请求)发送到 proxy 上,而对于其他的文件请求,并不希望将其发送到 proxy server 上。此时,需要通过正确的设置 bypass 参数来解决,关于 bypass 方法的解释,请参考 http://webpack.github.io/docs/webpack-dev-server.html
- proxy
- :
- {
- '/some/path': {
- target: 'https://other-server.example.com',
- secure: false,
- bypass: function(req, res, proxyOptions) {
- if (req.headers.accept.indexOf('html') !== -1) {
- console.log('Skipping proxy for browser request.');
- return '/index.html';
- }
- }
- }
json-server (https://github.com/typicode/json-server),是用来在 web 端构建 web service 服务的工具。它将 json 数据结构与 web server 的概念结合在起来,从而极大地简化了 web service 服务的开发工作。
回想以前,我们构建 web service 服务的时候,不得不借助一些服务器端的技术或者框架来实现,例如 Apache CXF (http://cxf.apache.org)。同时,让web service 能够运行在 web 端,还需要容器本身的支持(例如Tomcat,WebSphere容器)。也就是说,搭建 web service 服务,我们不仅需要熟悉一些框架的结构和 API 接口,还需要完成容器的搭建与服务的部署工作,而这些跟实际的开发工作其实并没有直接的联系。
json-server 的用法
随着 NodeJs 的出现,一些框架与工具开始采用 javascript 来实现。其中 json-server 工具的出现,极大的简化了构建 web service 服务的工作。使用 json-server 构建 web service 服务,我们只需要编写如下的 json 文件
- {
- "posts": [
- {
- "id": 1,
- "title": "json-server",
- "author": "typicode"
- }
- ],
- "comments": [
- {
- "id": 1,
- "body": "some comment",
- "postId": 1
- }
- ],
- "profile": {
- "name": "typicode"
- }
- }
现在启动 json server
- $ json
- -
- server
- --
- watch db
- .
- json
如果需要修改 server 的服务端口,可以这样
- $ json
- -
- server
- --
- watch db
- .
- json
- --
- port
- 3004
json-server 构建静态文件服务器
方法一:建立 ./public 文件夹
- mkdir
- public
- echo
- 'hello world'
- >
- public
- /
- index
- .
- html json
- -
- server db
- .
- json
方法二:使用--static 参数
- json
- -
- server db
- .
- json
- --
- static
- .
- /
- some
- -
- other
- -
- dir
json-server 的路由配置
建立 routes.json 文件,如下
- {
- "/api/": "/",
- "/blog/:resource/:id/show": "/:resource/:id",
- "/blog/:category": "/posts/:id?category=:category"
- }
启动 json-server 服务,并配置 --routes 选项
- json
- -
- server db
- .
- json
- --
- routes routes
- .
- json
访问相应的 url,来测试自定义的路由配置
- /api/posts # → /posts
- /api/posts/1 # → /posts/1
- /blog/posts/1/show # → /posts/1
- /blog/javascript # → /posts?category=javascript
关于 json-server 的 API 调用,和其他的用法可以参考
- https://github.com/typicode/json-server
如今的 web 应用变得越来越复杂,也更加强调和关注客户端技术的实现能力。由于很多的功能需要客户端来予以实现,这不仅增加了实现文件的复杂度,也导致文件本身如 css, javascript 变得越来越大。在将 web 应用投入实际的运行环境之前,往往我们需要对这些文件文件进行压缩,合并与混淆的工作,来提高页面的加载速度。
但是,这样的转换却增加了调试工作的难度,source map 的出现就是用来解决这样的问题。Source map 是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。
生成 source map 文件
webpack 通过 devtool 参数控制 source map 的生成,并支持多种 source map 配置(参看 https://webpack.github.io/docs/configuration.html)
例如
- {
- devtool: "#inline-source-map"
- }
- // => //# sourceMappingURL=..
另外一种生成 source map 文件的方法是使用 Google 的 Closure 编译器,其命令格式如下:
- java
- -
- jar compiler
- .
- jar \
- --js script.js \
- --create_source_map ./script-min.js.map \
- --source_map_format=V3 \
- --js_output_file script-min.js
使用 source map 调试 javascript 文件
Chrome 浏览器需要在 Developer Tools 的 Setting 设置中,确认选中"Enable source maps"。
点击查看大图
Firefox23+ 浏览器的 developer tools,在默认情况下也是支持 source map 文件
点击查看大图
来源: http://www.ibm.com/developerworks/cn/iot/library/iot-lp101-quick-start-guide-iot-developers/index.html