webpack 介紹
webpack 是什么
為什么引入新的打包工具
webpack 核心思想
webpack 安裝
webpack 使用
命令行調(diào)用
配置文件
webpack 配置參數(shù)
entry 和 output
單一入口
多個(gè)入口
多個(gè)打包目標(biāo)
webpack 支持 Jsx 和 Es6
webpack loaders
loader 定義
loader 功能
loader 配置
使用 loader
webpack 開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境
webpack 分割 vendor 代碼和應(yīng)用業(yè)務(wù)代碼
webpack develop server
安裝 webpack-dev-server
啟動(dòng) webpack-dev-server
代碼監(jiān)控
自動(dòng)刷新
熱加載 （hot module replacement)
在 webpack.config.js 中配置 webpack develop server
2.2.1 webpack 介紹
webpack 是什么
webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules
webpack 是一個(gè)模塊打包工具淳蔼，輸入為包含依賴關(guān)系的模塊集，輸出為打包合并的前端靜態(tài)資源嗅蔬。在上一節(jié)的前端工程化中词爬，已經(jīng)介紹過(guò)矿酵，webpack 是同時(shí)支持 AMD 和 CommonJs 的模塊定義方式，不僅如此，webpack 可以將任何前端資源視為模塊帅容，如 css峡迷，圖片银伟，文本。
為什么要引入新的打包工具
在 webpack 出現(xiàn)之前绘搞，已經(jīng)有了一些打包工具彤避，如 Browserify, 那為什么不優(yōu)化這些工具，而是重復(fù)造輪子夯辖？
webpack 之前的打包工具工具功能單一琉预，只能完成特定的任務(wù)，然而 web 前端工程是復(fù)雜的蒿褂，一個(gè) webapp 對(duì)于業(yè)務(wù)代碼的要求可能有：
代碼可以分塊圆米，實(shí)現(xiàn)按需加載
首屏加載時(shí)間要盡量減少
需要集成一些第三方庫(kù)
對(duì)于模塊打包工具，單一的支持 CommonJs 的打包在大型項(xiàng)目中是不夠用的贮缅，為了滿足一個(gè)大型項(xiàng)目的前端需求榨咐，那么一個(gè)打包工具應(yīng)該包含一些這些功能：
支持多個(gè) bundler 輸出 -> 解決代碼分塊問(wèn)題
異步加載 -> 按需加載，優(yōu)化首屏加載時(shí)間
可定制化 -> 可以集成第三方庫(kù)谴供，可以定制化打包過(guò)程
其他資源也可以定義為模塊
webpack 的出現(xiàn)正式為了解決這些問(wèn)題块茁，在 webpack 中，提供了一下這些功能：
代碼分塊： webpack 有兩種類型的模塊依賴桂肌，一種是同步的数焊，一種是異步的。在打包的過(guò)程中可以將代碼輸出為代碼塊（chunk）崎场，代碼塊可以實(shí)現(xiàn)按需加載佩耳。 異步加載的代碼塊通過(guò)分割點(diǎn)（spliting point）來(lái)確定。
Loaders： Webpack 本身只會(huì)處理 Javascript谭跨，為了實(shí)現(xiàn)將其他資源也定義為模塊干厚，并轉(zhuǎn)化為 Javascript， Webpack 定義 loaders , 不同的 loader 可以將對(duì)應(yīng)的資源轉(zhuǎn)化為 Javascript 模塊螃宙。
智能的模塊解析： webpack 可以很容易將第三方庫(kù)轉(zhuǎn)化為模塊集成到項(xiàng)目代碼中蛮瞄，模塊的依賴可以用表達(dá)式的方式（這在其他打包工具中是沒(méi)有支持的），這種模塊依賴叫做動(dòng)態(tài)模塊依賴谆扎。
插件系統(tǒng)： webpack 的可定制化在于其插件系統(tǒng)挂捅，其本身的很多功能也是通過(guò)插件的方式實(shí)現(xiàn)，插件系統(tǒng)形成了 webpack 的生態(tài)堂湖，是的可以使用很多開(kāi)源的第三方插件闲先。
webpack 核心思想
webpack 的三個(gè)核心：
萬(wàn)物皆模塊：在 webpack 的世界中状土，除了 Javascript，其他任何資源都可以當(dāng)做模塊的方式引用
按需加載： webapp 的優(yōu)化關(guān)鍵在于代碼體積伺糠，當(dāng)應(yīng)用體積增大蒙谓，實(shí)現(xiàn)代碼的按需加載是剛需，這也是 webpack 出現(xiàn)的根本原因
可定制化： 任何一個(gè)工具都不可能解決所有問(wèn)題退盯，提供解決方案才是最可行的彼乌，webpack 基于可定制化的理念構(gòu)建，通過(guò)插件系統(tǒng)渊迁，配置文件慰照，可以實(shí)現(xiàn)大型項(xiàng)目的定制需求。
2.2.2 安裝配置
第一步：Node.js
webpack 是 Node 實(shí)現(xiàn)琉朽，首先需要到 Node.js 下載安裝最新版本的 Node.js
第二步：webpack-cli
Node.js 安裝好過(guò)后毒租，打開(kāi)命令行終端，通過(guò) npm 命令安裝：
// -g 參數(shù)表示全局安裝
$ npm install webpack -g
第三步：新建空前端項(xiàng)目
為了使用 webpack箱叁，先新建一個(gè)空前端項(xiàng)目墅垮，創(chuàng)建一個(gè)目錄，目錄結(jié)構(gòu)如下:
.
├── index.html // 入口 HTML
├── dist // dist 目錄放置編譯過(guò)后的文件文件
└── src // src 目錄放置源文件
└── index.js // 入口 js
其中 html 內(nèi)容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React!</title>
</head>
<body>
<div id="AppRoot"></div>
<script src="dist/index.js"></script>
</body>
</html>
index.js 內(nèi)容為:
alert('hello world webpack');
第四步：在項(xiàng)目中安裝 webpack
// 初始化 package.json, 根據(jù)提示填寫(xiě) package.json 的相關(guān)信息
$ npm init
// 下載 webpack 依賴
// --save-dev 表示將依賴添加到 package.json 中的 'devDependencies' 對(duì)象中
$ npm install webpack --save-dev
- 第五步：Develop Server 工具 （可選）
dev server 可以實(shí)現(xiàn)一個(gè)基于 node + express 的前端 server
$ npm install webpack-dev-server --save-dev
2.2.3 webpack 使用
命令行調(diào)用
在之前創(chuàng)建的目錄下執(zhí)行：
$ webpack src/index.js dist/index.js
執(zhí)行成功過(guò)后會(huì)出現(xiàn)如下信息：
Hash: 9a8e7e83864a07c0842f
Version: webpack 1.13.1
Time: 37ms
Asset Size Chunks Chunk Names
index.js 1.42 kB 0 [emitted] main
[0] ./src/index.js 29 bytes {0} [built]
可以查看 dist/index.js 的編譯結(jié)果:
/******/ (function(modules) { // webpackBootstrap
// .......... UMD 定義內(nèi)容
/******/ })
/************************************************************************/
/******/ ([
/* 0 /
/**/ function(module, exports) {
// index.js 的內(nèi)容被打包進(jìn)來(lái)
alert('hello world webpack');
/***/ }
/******/ ]);
在瀏覽器中打開(kāi) index.html ：
配置文件
以命令執(zhí)行的方式需要填寫(xiě)很長(zhǎng)的參數(shù)耕漱，所以 webpack 提供了通過(guò)配置的方式執(zhí)行算色，在項(xiàng)目目錄下創(chuàng)建 webpack.config.js 如下：
var webpack = require('webpack')
module.exports = {
entry: './src/index.js',
output: {
path: './dist/',
filename: 'index.js'
}
}
執(zhí)行：
$ webpack
會(huì)和通過(guò)命令執(zhí)行有同樣的輸出
2.2.4 webpack 配置
entry 和 output
webpack 的配置中主要的兩個(gè)配置 key 是，entry 和 output螟够。
{
entry: [String | Array | Object], // 入口模塊
output: {
path: String, // 輸出路徑
filename: String // 輸出名稱或名稱 pattern
publicPath: String // 指定靜態(tài)資源的位置
... // 其他配置
}
}
單一入口
如果只有一個(gè)入口文件灾梦，可以有如下幾種配置方式
// 第一種 String
{
entry: './src/index.js',
output: {
path: './dist/',
filename: 'index.js'
}
}
// 第二種 Array
{
entry: ['./src/index.js'],
output: {
path: './dist/',
filename: 'index.js'
}
}
// 第三種 Object
{
entry: {
index: './src/index.js',
},
output: {
path: './dist/',
filename: 'index.js'
}
}
多個(gè)入口文件
當(dāng)存在多個(gè)入口時(shí) ，可以使用 Array 的方式妓笙，比如依賴第三方庫(kù) bootstrap 若河，最終 bootstrap 會(huì)被追加到打包好的 index.js 中，數(shù)組中的最后一個(gè)會(huì)被 export寞宫。
{
entry: ['./src/index.js', './vendor/bootstrap.min.js'],
output: {
path: './dist',
filename: "index.js"
}
}
最終的輸出結(jié)果如：
/******/ ([
/* 0 /
/**/ function(module, exports, webpack_require) {
__webpack_require__(1);
// export 最后一個(gè)
module.exports = __webpack_require__(2);
// },
/ 1 /
// function(module, exports) {
alert('hello world webpack');
// },
/ 2 /
// function(module, exports) {
// bootstrap 的內(nèi)容被追加到模塊中
console.log('bootstrap file');
/***/ }
/******/ ])
多個(gè)打包目標(biāo)
上面的例子中都是打包出一個(gè) index.js 文件萧福，如果項(xiàng)目有多個(gè)頁(yè)面，那么需要打包出多個(gè)文件辈赋，webpack 可以用對(duì)象的方式配置多個(gè)打包文件
{
entry: {
index: './src/index.js',
a: './src/a.js'
},
output: {
path: './dist/',
filename: '[name].js'
}
}
最終會(huì)打包出：
.
├── a.js
└── index.js
文件名稱 pattern
[name] entry 對(duì)應(yīng)的名稱
[hash] webpack 命令執(zhí)行結(jié)果顯示的 Hash 值
[chunkhash] chunk 的 hash
為了讓編譯的結(jié)果名稱是唯一的鲫忍，可以利用 hash 。
2.2.5 webpack 支持 Jsx
現(xiàn)在我們已經(jīng)可以使用 webpack 來(lái)打包基于 CommonJs 的 Javascript 模塊了钥屈，但是還沒(méi)法解析 JSX 語(yǔ)法和 Es6 語(yǔ)法悟民。下面我們將利用 Babel 讓 webpack 能夠解析 Es6 和 Babel
第一步：npm install 依賴模塊
// babel 相關(guān)的模塊
$ npm install babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react babel-polyfill --save-dev
// react 相關(guān)的模塊
$ npm install react react-dom --save
第二步：webpack.config.js 中添加 babel loader 配置
{
entry: {
index: './src/index.js',
a: './src/a.js'
},
output: {
path: './dist/',
filename: '[name].js'
},
module: {
loaders: [{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react']
}
}]
}
}
第三步: 修改 index.js 為 React 的語(yǔ)法
src/index.js 內(nèi)容改為:
Es6 的知識(shí)在后面的章節(jié)中講解，目前我們暫時(shí)以 Es5 的方式來(lái)寫(xiě)焕蹄，但是配置已經(jīng)支持了 Es6 的編譯，熟悉 Es6 的讀者也可以直接寫(xiě) Es6
// 通過(guò) require 的方式依賴 React阀溶，ReactDOM
var React = require('react');
var ReactDOM = require('react-dom');
var Hello = React.createClass({
render: function render() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('AppRoot')
);
第四步：運(yùn)行 webpack
$ webpack
執(zhí)行結(jié)果：
Hash: ae2a037c191c18195b6a
Version: webpack 1.13.1
Time: 1016ms
Asset Size Chunks Chunk Names
a.js 1.42 kB 0 [emitted] a
index.js 700 kB 1 [emitted] index
+ 169 hidden modules
瀏覽器中打開(kāi) index.html 會(huì)顯示 Hello World
2.2.6 webpack loaders
在配置 JSX 的過(guò)程中腻脏，使用到了 loader鸦泳， 前面已經(jīng)介紹過(guò) webpack 的核心功能包含 loader，通過(guò) loader 可以將任意資源轉(zhuǎn)化為 javascript 模塊永品。
loader 定義
Loaders are transformations that are applied on a resource file of your app.
(Loaders 是應(yīng)用中源碼文件的編譯轉(zhuǎn)換器)
也就是說(shuō)在 webpack 中做鹰，通過(guò) loader 可以實(shí)現(xiàn) JSX 、Es6鼎姐、CoffeeScript 等的轉(zhuǎn)換
loader 功能
loader 管道：在同一種類型的源文件上钾麸，可以同時(shí)執(zhí)行多個(gè) loader ， loader 的執(zhí)行方式可以類似管道的方式炕桨，管道執(zhí)行的方式是從右到左的方式loader 可以支持同步和異步
loader 可以接收配置參數(shù)
loader 可以通過(guò)正則表達(dá)式或者文件后綴指定特定類型的源文件
插件可以提供給 loader 更多功能
loader 除了做文件轉(zhuǎn)換以外饭尝，還可以創(chuàng)建額外的文件
loader 配置
新增 loader 可以在 webpack.config.js 的 module.loaders 數(shù)組中新增一個(gè) loader 配置。
一個(gè) loader 的配置為：
{
// 通過(guò)擴(kuò)展名稱和正則表達(dá)式來(lái)匹配資源文件
test: String ,
// 匹配到的資源會(huì)應(yīng)用 loader献宫， loader 可以為 string 也可以為數(shù)組
loader: String | Array
}
感嘆號(hào)和數(shù)組可以定義 loader 管道:
{
module: {
loaders: [
{ test: /.jade$/, loader: "jade" },
// => .jade 文件應(yīng)用 "jade" loader
{ test: /\.css$/, loader: "style!css" },
{ test: /\.css$/, loaders: ["style", "css"] },
// => .css 文件應(yīng)用 "style" 和 "css" loader
]
}
}
loader 可以配置參數(shù)
{
module: {
loaders: [
// => url-loader 配置 mimetype=image/png 參數(shù)
{
test: /.png$/,
loader: "url-loader?mimetype=image/png"
}, {
test: /.png$/,
loader: "url-loader",
query: { mimetype: "image/png" }
}
]
}
}
使用 loader
第一步: 安裝
loader 和 webpack 一樣都是 Node.js 實(shí)現(xiàn)钥平，發(fā)布到 npm 當(dāng)中，需要使用 loader 的時(shí)候姊途，只需要
$ npm install xx-loader --save-dev
// eg css loader
$ npm install css-loader style-loader --save-dev
第二步：修改配置
{
entry: {
index: './src/index.js',
a: './src/a.js'
},
output: {
path: './dist/',
filename: '[name].js'
},
module: {
loaders: [{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react']
}
}, {
test: /.css$/,
loader: "style-loader!css-loader"
}]
}
}
第三步：使用
前面我們已經(jīng)使用過(guò) jsx loader 了涉瘾， loader 的使用方式有多種
在配置文件中配置
顯示的通過(guò) require 調(diào)用
命令行調(diào)用
顯示的調(diào)用 require 會(huì)增加模塊的耦合度，應(yīng)盡量避免這種方式
以 css-loader 為例子捷兰，在項(xiàng)目 src 下面創(chuàng)建一個(gè) css
src/style.css
body {
background: red;
color: white;
}
修改 webpack 配置 entry 添加
entry: {
index: ['./src/index.js', './src/style.css']
}
執(zhí)行 webpack 命令然后打開(kāi) index.html 會(huì)看到頁(yè)面背景被改為紅色立叛。
最終的編譯結(jié)果為：
....
function(module, exports, webpack_require) {
exports = module.exports = webpack_require(171)();
exports.push([module.id, "\nbody {\n background: red;\n color: white;\n}\n", ""]);
}
....
可以看到 css 被轉(zhuǎn)化為了 javascript, 在頁(yè)面中并非調(diào)用 <link rel="stylesheet" href=""> 的方式， 而是使用 inline 的<style>.....</style>
另外一種方法是直接 require贡茅， 修改 src/index.js:
var css = require("css!./style.css");
編譯結(jié)果相同秘蛇。
2.2.7 webpack 開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境
前端開(kāi)發(fā)環(huán)境通常分為兩種，開(kāi)發(fā)環(huán)境和生成環(huán)境友扰，在開(kāi)發(fā)環(huán)境中彤叉，可能我們需要日志輸出，sourcemap 村怪，錯(cuò)誤報(bào)告等功能秽浇，在生成環(huán)境中，需要做代碼壓縮甚负，hash 值生成柬焕。兩種環(huán)境在其他的一些配置上也可能不同。
所以為了區(qū)分梭域，我們可以創(chuàng)建兩個(gè)文件：
webpack.config.js // 開(kāi)發(fā)環(huán)境
webpack.config.prod.js // 生產(chǎn)環(huán)境
生產(chǎn)環(huán)境 build 用如下命令：
$ webpack --config webpack.config.prod.js
在本章深入 webpack 小節(jié)中會(huì)更多的介紹生產(chǎn)環(huán)境中的優(yōu)化
2.2.8 webpack 插件
webpack 提供插件機(jī)制斑举，可以對(duì)每次 build 的結(jié)果進(jìn)行處理。配置 plugin 的方法為在 webpack.config.js 中添加：
{
plugins: [
new BellOnBundlerErrorPlugin()
]
}
plugin 也是一個(gè) npm 模塊病涨，安裝一個(gè) plugin ：
$ npm install bell-on-bundler-error-plugin --save-dev
2.2.9 webpack 分割 vendor 代碼和應(yīng)用業(yè)務(wù)代碼
在上面的 jsx 配置中富玷，我們將 React 和 ReactDOM 一起打包進(jìn)了項(xiàng)目代碼。為了實(shí)現(xiàn)業(yè)務(wù)代碼和第三方代碼的分離，我們可以利用
CommonsChunkPlugin 插件.
修改 webpack.config.js
{
entry: {
index: './src/index.js',
a: './src/a.js',
// 第三方包
vendor: [
'react',
'react-dom'
]
},
output: {
path: './dist/',
filename: '[name].js'
},
module: {
loaders: [{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react']
}
}, {
test: /.css$/,
loader: "style-loader!css-loader"
}]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= /"vendor", / filename= */"vendor.bundle.js")
]
}
執(zhí)行 webpack 命令赎懦，輸出日志：
Hash: f1256dc00b9d4bde8f7f
Version: webpack 1.13.1
Time: 1459ms
Asset Size Chunks Chunk Names
a.js 109 bytes 0 [emitted] a
index.js 10.9 kB 1 [emitted] index
vendor.bundle.js 702 kB 2 [emitted] vendor
[0] multi vendor 40 bytes {2} [built]
[0] multi index 40 bytes {1} [built]
+ 173 hidden modules
index.js 體積變小了雀鹃，多出了 vendor.bundle.js
2.2.10 webpack develop server
在前端開(kāi)發(fā)的過(guò)程中，通常需要啟動(dòng)一個(gè)服務(wù)器励两，把開(kāi)發(fā)打包好的前端代碼放在服務(wù)器上黎茎，通過(guò)訪問(wèn)服務(wù)器訪問(wèn)并測(cè)試（因?yàn)榭梢杂行┣闆r需要 ajax 請(qǐng)求）。 webpack 提供了一個(gè)基于 node.js Express 的服務(wù)器 - webpack-dev-server 來(lái)幫助我們簡(jiǎn)化服務(wù)器的搭建当悔，并提供服務(wù)器資源訪問(wèn)的一些簡(jiǎn)單配置傅瞻。
安裝 webpack-dev-server
$ npm install webpack-dev-server -g
啟動(dòng) webpack-dev-server
$ webpack-dev-server --content-base ./
--content-base ./ 參數(shù)表示將當(dāng)前目錄作為 server 根目錄。 命令啟動(dòng)過(guò)后盲憎，會(huì)在 8080 端口啟動(dòng)一個(gè) http 服務(wù)嗅骄，通過(guò)訪問(wèn)http://localhost:8080/index.html 可以訪問(wèn) index.html 內(nèi)容。
如果訪問(wèn)提示報(bào)錯(cuò)：
Uncaught ReferenceError: webpackJsonp is not defined
原因是 html 中沒(méi)有引用 vendor.bundle.js, 修改 html ：
<script src="dist/vendor.bundle.js"></script>
<script src="dist/index.js"></script>
修改 index.html 過(guò)后可以看到正確結(jié)果
代碼監(jiān)控
webpack-dev-server 除了提供 server 服務(wù)以外焙畔， 還會(huì)監(jiān)控源文件的修改掸读，如果源文件改變了，會(huì)調(diào)用 webpack 重新打包
修改 style.css 中的內(nèi)容為：
body {
background: whitesmoke;
color: #333;
font-size: 100px;
}
可以看到輸出以下日志：
[168] ./~/react/lib/renderSubtreeIntoContainer.js 466 bytes {2} [built]
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
Hash: cc7d7720b1a0fcbef972
Version: webpack 1.13.0
Time: 76ms
chunk {0} a.js (a) 32 bytes {2}
+ 1 hidden modules
chunk {1} index.js (index) 10.3 kB {2}
[170] ./~/css-loader!./src/style.css 230 bytes {1} [built]
+ 5 hidden modules
chunk {2} vendor.bundle.js (vendor) 665 kB
+ 168 hidden modules
webpack: bundle is now VALID.
這個(gè)時(shí)候說(shuō)明代碼已經(jīng)修改了宏多，但是這個(gè)時(shí)候刷新瀏覽器過(guò)后儿惫，背景是沒(méi)有改變的，原因是 webpack-dev-server 的打包結(jié)果是放在內(nèi)存的伸但，查看 dist/index.js 的內(nèi)容實(shí)際上是沒(méi)有改變的肾请，那如何訪問(wèn)內(nèi)存中的打包內(nèi)容呢？
修改 webpack.config.js 的 output.publicPath:
output: {
path: './dist/',
filename: '[name].js',
publicPath: '/dist'
// webpack-dev-server 啟動(dòng)目錄是 /, /dist 目錄是打包的目標(biāo)目錄相對(duì)于啟動(dòng)目錄的路徑
},
重新啟動(dòng)
$ ctrl + c 結(jié)束進(jìn)程
$ webpack-dev-server
修改 style.css 再刷新頁(yè)面更胖，修改的內(nèi)容會(huì)反映出來(lái)铛铁。
自動(dòng)刷新
上面的配置已經(jīng)能做到自動(dòng)監(jiān)控代碼，每次修改完代碼却妨，刷新瀏覽器就可以看到最新結(jié)果饵逐，但是 webpack-dev-server 還提供了自動(dòng)刷新功能，有兩種模式彪标。
Iframe 模式
修改訪問(wèn)的路徑： http://localhost:8080/index.html -> http://localhost:8080/webpack-dev-server/index.html 倍权。這個(gè)時(shí)候每次修改代碼，打包完成過(guò)后都會(huì)自動(dòng)刷新頁(yè)面捞烟。
不需要額外配置薄声，只用修改路徑
應(yīng)用被嵌入了一個(gè) iframe 內(nèi)部，頁(yè)面頂部可以展示打包進(jìn)度信息
因?yàn)?iframe 的關(guān)系题画，如果應(yīng)用有多個(gè)頁(yè)面默辨，無(wú)法看到當(dāng)前應(yīng)用的 url 信息
inline 模式
啟動(dòng) webpack-dev-server 的時(shí)候添加 --inline 參數(shù)
需要添加 --inline 配置參數(shù)
沒(méi)有頂部信息提示條，提示信息在控制臺(tái)中展現(xiàn)
熱加載 （hot module replacement)
webpack-dev-server 還提供了模塊熱加載的方式苍息，在不刷新瀏覽器的條件下缩幸，應(yīng)用最新的代碼更新壹置，啟動(dòng) webpack-dev-server 的時(shí)候添加 --inline --hot 參數(shù)就可以體驗(yàn)。
$ webpack-dev-server --inline --hot
修改代碼在瀏覽器控制臺(tái)中會(huì)看到這樣的日志輸出：
[HMR] Waiting for update signal from WDS...
vendor.bundle.js:670 [WDS] Hot Module Replacement enabled.
2vendor.bundle.js:673 [WDS] App updated. Recompiling...
vendor.bundle.js:738 [WDS] App hot update...
vendor.bundle.js:8152 [HMR] Checking for updates on the server...
vendor.bundle.js:8186 [HMR] Updated modules:
vendor.bundle.js:8188 [HMR] - 245
vendor.bundle.js:8138 [HMR] App is up to date.
在 webpack.config.js 中配置 webpack develop server
修改 webpack.config.js 添加：
plugins: [
new webpack.optimize.CommonsChunkPlugin(
/* chunkName= /"vendor",
/ filename= */"vendor.bundle.js", Infinity),
// 需要手動(dòng)添加 HotModuleReplacementPlugin , 命令行的方式會(huì)自動(dòng)添加
new webpack.HotModuleReplacementPlugin()
],
devServer: {
hot: true,
inline: true
}
不加參數(shù)直接執(zhí)行 webpack-dev-server
$ webpack-dev-server
webpack-dev-server 還提供了其他的一些功能表谊， 如：
配置 proxy
訪問(wèn) node.js API
和現(xiàn)有的 node 服務(wù)集成
基于這些功能可以實(shí)現(xiàn)很多自定義的配置蒸绩。
