本地OS：OSX 10.11.6
Node：[nodejs.org](https://nodejs.org)
Webpack：[webpack.github.io](https://webpack.github.io/)
Webpack是當(dāng)下最熱門(mén)的前端資源模塊化管理和打包工具止潮。它可以將許多松散的模塊按照依賴(lài)和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源店雅。還可以將按需加載的模塊進(jìn)行代碼分隔养叛，等到實(shí)際需要的時(shí)候再異步加載国裳。通過(guò) loader 的轉(zhuǎn)換鞠苟，任何形式的資源都可以視作模塊鬓照，比如 CommonJs 模塊熔酷、 AMD 模塊、 ES6 模塊豺裆、CSS拒秘、圖片、 JSON、Coffeescript翼抠、 LESS 等咙轩。
1、安裝Node
brew install node
2阴颖、安裝Webpack
#全局安裝
npm install webpack -g
此時(shí) Webpack 已經(jīng)安裝到了全局環(huán)境下，可以通過(guò)命令行 webpack -h 試試丐膝。
#本地項(xiàng)目安裝
npm install webpack --save-dev
3量愧、Webpack使用
1、初始化項(xiàng)目
# 進(jìn)入項(xiàng)目目錄
# 確定已經(jīng)有package.json帅矗，沒(méi)有就通過(guò) npm init 創(chuàng)建
2偎肃、創(chuàng)建webpack.config.js配置文件
# webpack.config.js
module.exports = {
entry: "./entry.js", //入口文件配置項(xiàng)
output: {
filename: "bundle.js" //打包文件
},
module: {
loaders: []
}
};
entry：指入口文件的配置項(xiàng)，它是一個(gè)數(shù)組的原因是-webpack允許多個(gè)入口點(diǎn)浑此。 當(dāng)然如果你只有一個(gè)入口的話累颂，也可以直接使用雙引號(hào)"./entry.js"
output：配置打包結(jié)果，path定義了輸出的文件夾凛俱，filename則定義了打包結(jié)果文件的名稱(chēng)
module：定義了對(duì)模塊的處理邏輯紊馏，這里可以用loaders定義了一系列的加載器，以及一些正則蒲犬。當(dāng)需要加載的文件匹配test的正則時(shí)朱监，就會(huì)調(diào)用后面的loader對(duì)文件進(jìn)行處理，這正是webpack強(qiáng)大的原因原叮。
3赫编、安裝依賴(lài)包
npm install css-loader style-loader --save-dev
4、測(cè)試案例
-
1奋隶、安裝依賴(lài)包
npm install jquery css-loader style-loader --save-dev 2擂送、配置webpack.config.js文件
# webpack.config.js
module.exports = {
entry: "./entry.js", //入口文件配置項(xiàng)
output: {
filename: "bundle.js" //打包文件
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style!css"
}
]
}
};
- 3、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack</title>
</head>
<body>
<h1></h1>
</body>
</html>
<script src="./bundle.js"></script>
- 4唯欣、module-one.js
console.log("Module One");
var $ = require("jquery");
$("h1").html("Hello Webpack!");
- 5嘹吨、module-two.js
console.log("Module Two");
- 6、style.css
body{
background: orange;
}
- 7黍聂、entry.js
require('./style.css');
require('./module-one.js');
require('./module-two.js');
-
8躺苦、執(zhí)行打包
webpack
# 會(huì)出現(xiàn)如下信息
Hash: e419ccdda7209b3a641f
Version: webpack 1.14.0
Time: 1043ms
Asset Size Chunks Chunk Names
bundle.js 288 kB 0 [emitted] main
[0] ./entry.js 123 bytes {0} [built]
[5] ./module-one.js 130 bytes {0} [built]
[7] ./module-two.js 69 bytes {0} [built]
+ 5 hidden modules
4、常用依賴(lài)包
css-loader style-loader babel-core babel-loader sass-loader url-loader file-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime
5产还、常用命令
//打包詳細(xì)信息
webpack --display-modules
//打印更詳細(xì)信息
webpack --display-modules --display-reasons
//發(fā)布?jí)嚎s
webpack -p
//熱更新代碼
webpack -w
//安裝webpack調(diào)試服務(wù)
npm install webpack-dev-server --save-dev
npm install webpack-dev-server -g //全局安裝
//開(kāi)啟服務(wù)器
webpack-dev-server --inline
//開(kāi)啟熱更新
webpack-dev-server --inline --hot
//生成profile分析文件
webpack --profile --json > stats.json
//profile文件分析網(wǎng)站
http://webpack.github.io/analyse/
http://chrisbateman.github.io/webpack-visualizer/