介紹
webpack 是一個(gè) JavaScript 應(yīng)用程序模塊打包器(module bundler)得滤。webpack 通過快速建立應(yīng)用程序依賴圖表并以正確的順序打包它們來簡化你的工作流。你能夠針對(duì)你的代碼來對(duì) webpack 進(jìn)行自定義的優(yōu)化配置，比如為生產(chǎn)環(huán)境拆分 vendor/css/js 代碼憔购，無刷新熱重載(hot-reload)等.
Webpack可以做什么
處理module依賴關(guān)系
打包js焦匈，css和png等
降低頁面初始加載時(shí)間
方便組合第三方組件庫
可以轉(zhuǎn)換不同語法成標(biāo)準(zhǔn)語法
安裝
這里使用的是 webpack 2.4.1 版本赘淮。
全局安裝
npm install -g webpack
本地安裝
npm install --save-dev webpack
一個(gè)小例子
創(chuàng)建應(yīng)用并安裝必要的依賴庫
$ mkdir webpack-demo
$ cd webpack-demo
$ npm init -y
$ npm install --save-dev webpack
$ npm install --save-dev css-loader
$ npm install --save-dev style-loader
$ npm install --save-dev extract-text-webpack-plugin
$ npm install webpack-dev-server
入口 (index.js)
import './style.css';
content = require("./content.js")
var element = document.createElement('message');
element.innerHTML = content;
document.body.appendChild(element);
自定義模塊 (content.js)
module.exports = "It works from content.js!!!";
css (style.css)
body {
background: grey;
}
html頁面 (index.html)
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
webpack配置
module.exports = {
entry: "./index.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
rules: [{
test: /.css$/,
use: [ 'style-loader', 'css-loader' ]
}]
}
};
打包生成 bundle.js文件
$ webpack
Hash: 62f1078175b4dbbd7d46
Version: webpack 2.4.1
Time: 368ms
Asset Size Chunks Chunk Names
bundle.js 19.1 kB 0 [emitted] main
[0] ./content.js 48 bytes {0} [built]
[1] ./style.css 992 bytes {0} [built]
[2] ./index.js 171 bytes {0} [built]
[3] ./~/css-loader!./style.css 192 bytes {0} [built]
[4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
[5] ./~/style-loader/addStyles.js 9.15 kB {0} [built]
[6] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]
運(yùn)行后可以看到生成一個(gè) bundle.js 文件辕录，其中包含了所有js和css。
在瀏覽器直接訪問 index.html 文件查看結(jié)果梢卸。
熱部署
本地?zé)岵渴?/h4>
-
第一步：啟動(dòng) webpack
$ webpack --watch
第二步：修改代碼
第三部：瀏覽器刷新（訪問file:///.../index.html）
服務(wù)器熱部署
-
第一步：啟動(dòng) webpack-dev-server
$ webpack-dev-server
第二步：修改代碼
第三步：瀏覽器刷新（訪問http://localhost:8000）
自動(dòng)刷新頁面
第一步：啟動(dòng) webpack
$ webpack --watch
第二步：修改代碼
第三部：瀏覽器刷新（訪問file:///.../index.html）
第一步：啟動(dòng) webpack-dev-server
$ webpack-dev-server
第二步：修改代碼
第三步：瀏覽器刷新（訪問http://localhost:8000）
到目前為止走诞，我們的開發(fā)每次在修改完js和css之后都需要手動(dòng)刷新瀏覽器來查看結(jié)果，其實(shí) webpack-dev-server 可以啟動(dòng)成每次修改后自動(dòng)刷新瀏覽器蛤高，下面讓我們來試試吧蚣旱。使用下面的命令來啟動(dòng) webpack-dev-server：
$ webpack-dev-server --hot --inline
然后修改 js 或者 css碑幅，保存，頁面自動(dòng)刷新了吧塞绿。
