標(biāo)簽（空格分隔）： 前端
Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具愚争。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔禁灼，等到實(shí)際需要的時(shí)候再異步加載碉考。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊袒哥，比如 CommonJs 模塊缩筛、 AMD 模塊、 ES6 模塊堡称、CSS瞎抛、圖片、 JSON却紧、Coffeescript桐臊、 LESS 等。
1 webpack 的 Hello World
1.1 安裝 webpack晓殊，初始化項(xiàng)目目錄
# 全局安裝 webpack
[ahcj@localhost ~]$ npm install -g webpack
# 查看版本
[ahcj@localhost ~]$ webpack -v
3.5.4
# 顯示幫助信息
[ahcj@localhost ~]$ webpack -h
1.2 新建和初始化項(xiàng)目目錄
# 新建項(xiàng)目目錄
[ahcj@localhost test]$ mkdir learn-webpack
[ahcj@localhost test]$ cd learn-webpack
# 初始化項(xiàng)目目錄
[ahcj@localhost test]$ npm init
1.3 創(chuàng)建文件和目錄
# 創(chuàng)建 app 和 public 文件夾
# app文件夾用來存放原始代碼断凶，public 用來存放編譯后的文件
[ahcj@localhost learn-webpack]$ mkdir app public
# 創(chuàng)建 index.html main.js greet.js
[ahcj@localhost learn-webpack]$ touch public/index.html app/greet.js app/main.js
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'> </div>
<script src="bundle.js"></script>
</body>
</html>
app/main.js
const greeter = require('./greet.js');
document.querySelector("#root").appendChild(greeter());
alert()
app/greet.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
1.4 打包生成 public/bundle.js
# 打包
[ahcj@localhost learn-webpack]$ webpack app/main.js public/bundle.js
Hash: 0bd4f09244f0e8c60354
Version: webpack 3.5.4
Time: 79ms
Asset Size Chunks Chunk Names
bundle.js 2.47 kB 0 [emitted] main
[0] ./app/main.js 0 bytes {0} [built]
# 訪問
[ahcj@localhost learn-webpack]$ firefox public/index.html
2 使用配置文件
2.1 新建配置文件 webpack.config.js
# 新建配置文件
[ahcj@localhost learn-webpack]$ touch webpack.config.js
# 配置文件內(nèi)容
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出文件的文件名
}
}
注：“__dirname”是node.js中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄巫俺。
2.2 修改 npm 配置文件 package.json
{
"name": "learn-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack" // 修改的是這里认烁，JSON文件不支持注釋，引用時(shí)請清除
},
"author": "",
"license": "ISC"
}
2.3 執(zhí)行
[ahcj@localhost learn-webpack]$ npm start
> learn-webpack@1.0.0 start /home/ahcj/test/learn-webpack
> webpack
Hash: fb1e5f5198028e964873
Version: webpack 3.5.4
Time: 85ms
Asset Size Chunks Chunk Names
bundle.js 2.79 kB 0 [emitted] main
[0] ./app/main.js 102 bytes {0} [built]
[1] ./app/greet.js 142 bytes {0} [built]
3 搭建本地服務(wù)器
3.1 安裝 server 模塊
[ahcj@localhost learn-webpack]$ npm install --save-dev webpack-dev-server
3.2 修改 webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出文件的文件名
},
devServer: {
contentBase: "./public",//本地服務(wù)器所加載的頁面所在的目錄
port:8080, //默認(rèn)監(jiān)聽端口介汹，如果省略却嗡，默認(rèn)為”8080“
historyApiFallback: true,//不跳轉(zhuǎn)
inline: true//實(shí)時(shí)刷新
},
}
3.3 修改 package.json，添加 serve 命令
{
"name": "learn-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"serve": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack-dev-server": "^2.7.1"
}
}
3.4 運(yùn)行命令嘹承，自動打開瀏覽器并監(jiān)聽文件變化
[ahcj@localhost learn-webpack]$ npm run serve
> learn-webpack@1.0.0 serve /home/ahcj/test/learn-webpack
> webpack-dev-server --open
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 6a71bf1e9ff28e2b26fb
Version: webpack 3.5.4
Time: 752ms
Asset Size Chunks Chunk Names
bundle.js 325 kB 0 [emitted] [big] main
[35] multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.js 40 bytes {0} [built]
.......省略.......
[88] ./app/greet.js 142 bytes {0} [built]
+ 74 hidden modules
webpack: Compiled successfully.
4 生成Source Map（使調(diào)試更容易）
Source Map 可以讓 編譯后的文件和源文件產(chǎn)生對應(yīng)關(guān)系稽穆，讓 chrome 可以將錯(cuò)誤定位到源文件
修改 webpack.config.js
module.exports = {
devtool: 'source-map', //在一個(gè)單獨(dú)的文件中產(chǎn)生一個(gè)完整且功能完全的source map
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出文件的文件名
},
devServer: {
contentBase: "./public",//本地服務(wù)器所加載的頁面所在的目錄
port:8080, //默認(rèn)監(jiān)聽端口，如果省略赶撰，默認(rèn)為”8080“
historyApiFallback: true,//不跳轉(zhuǎn)
inline: true//實(shí)時(shí)刷新
},
}
[參考1：入門Webpack舌镶，看這篇就夠了][1]
[參考2：webpack 2.2 中文文檔][2]
[1]: www.reibang.com/p/42e11515c10f
[2]: ww.css88.com/doc/webpack2/concepts/entry-points/
