macOS: 10.13.5
webpack: 4.12.0
兩個配置文件
新手可能會搞混package.json和webpack.config.js架谎√拊常可以這樣理解恶导，把npm和webpack當成兩個函數(shù)怠硼，package.json負責給npm傳遞參數(shù)淮摔，webpack.config.js負責向webpack傳遞參數(shù)私沮。
基本配置
安裝webpack和webpack-cli
npm install webpack webpack-cli --save-dev
創(chuàng)建項目并使用npm初始化，-y（yes）表示不詢問和橙，使用默認值
mkdir webpack-demo && cd webpack-demo
npm init -y
根據(jù)下面文件樹創(chuàng)建文件夾和文件仔燕，并寫入內(nèi)容造垛。+表示新增加的文件
project
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
Lodash是一個“工具函數(shù)集”，它實現(xiàn)了一些常用的功能晰搀，如實現(xiàn)循環(huán)五辽、遍歷數(shù)組、生成隨機數(shù)等等外恕，它把這些功能抽象成函數(shù)杆逗，集合在一起×燮＃可以把它當成一個工具箱罪郊。
src/index.js
function component() {
//使用Lodash， _表示loadsh尚洽，_.joint()表示調(diào)用loadsh的joint函數(shù)排龄。是否想到了jQuery的$。這里翎朱，Lodash由index.html文件引入橄维。
let element = doucment.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
修改package.json，將項目（package）改為私有的拴曲，避免不小心把代碼發(fā)布出去争舞。-表示刪除 。package.json是npm的配置文件澈灼，可以參考npm官方文檔
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}
上面的例子有一個暗含的依賴關(guān)系竞川，在index.html中叁熔，index.js是在引用“l(fā)odash@4.16.6”后調(diào)用的委乌。因為index.js使用了lodash，不先引用lodash程序無法正常執(zhí)行荣回。這種依賴關(guān)系有明顯的缺點：
- 不清楚index.js需要引用其他的庫（library）遭贸，我們并不清楚index.js中使用的“_”變量是需要引用外部庫的。
- 如果我們在index.html忘了引用lodash心软，或者index.js先于lodash引用壕吹，程序都無法正常執(zhí)行。
- 我們在html文件中引入了外部庫删铃，即便沒有使用它耳贬，瀏覽器依然會強制將其下載。
上面這些缺點webpack都能解決猎唁。首先咒劲，將整個項目根據(jù)下面的文件樹進行修改
project
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
如上所示，我們將“源碼”（source）和“發(fā)布代碼”（distribution）進行分離，把index.html移入dist文件夾腐魂。源碼由我們創(chuàng)建慕的、編輯和修改，“發(fā)布代碼”是經(jīng)過webpack借由各種組件壓縮挤渔、優(yōu)化過后肮街，可供發(fā)布，最終在瀏覽器加載的代碼判导。
下面我們來解決index.js與lodash的依賴關(guān)系嫉父，將lodash與index.js打包在一起，讓webpack這個打包器名副其實眼刃。把lodash下載到本地
npm install --save lodash
下載后绕辖，如果lodash沒有被使用，那么它是不會被打包到最終的“發(fā)布代碼”的擂红。webpack還有按需引用的能力仪际，一些被引用的庫，如果只有部分代碼被使用昵骤，那么只有這部分代碼會被打包树碱。打包在一起的資源還可以進一步地壓縮和優(yōu)化。
src/index.js
+ import _ from 'lodash';
+
function component() {
var element = document.createElement('div');
// Lodash, 不在html 文件引入变秦，由js文件引入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
更新index.html成榜，不再由它引入Lodash
<!doctype html>
<html>
<head>
<title>Getting Started</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="main.js"></script>
</body>
</html>
上面的一番操作，很明確地引入了lodash蹦玫，而且把它綁定到了_赎婚。這樣避免了“全域污染”(no global scope pollution)。根據(jù)這樣的設(shè)置樱溉，webpack能構(gòu)建出依賴圖（dependency graph）挣输，由此圖，將項目資源進行打包福贞，優(yōu)化撩嚼，而且會明確代碼的執(zhí)行順序。
終于來到激動人心的一步肚医，在終端執(zhí)行npx webpack绢馍。npx是新版本npm附帶的工具，它會幫你方便地執(zhí)行依賴包肠套。沒有npx前，查看webpack的版本號猖任，需要執(zhí)行./node_modules/.bin/webpack -v你稚，現(xiàn)在一行npx webpack -v搞定。 npx 會自動查找你想執(zhí)行的依賴包中的可執(zhí)行文件，如果找不到刁赖，就會去 PATH 里找搁痛。如果依然找不到，就會幫你安裝宇弛。
npx webpack
Hash: c2831644d36e1f21c8c3
Version: webpack 4.12.0
Time: 3169ms
Built at: 06/10/2018 9:05:35 PM
Asset Size Chunks Chunk Names
main.js 70.4 KiB 0 [emitted] main
[1] (webpack)/buildin/module.js 497 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./src/index.js 218 bytes {0} [built]
+ 1 hidden module
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
在瀏覽器打開index.html鸡典。沒有意外的話，'Hello webpack' 就顯示在你面前枪芒。
使用配置文件
webpack4后是可以不用配置文件的彻况，但是復雜的項目還是離不開它的。設(shè)置一個配置文件舅踪，總比在命令行輸入各種指令要方便纽甘、高效得多。
在根目錄創(chuàng)建webpack.config.js
project
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
執(zhí)行構(gòu)建指令抽碌，這次給它指定配置文件
npx webpack --config webpack.config.js
Hash: 39ac053a4c4975e616af
Version: webpack 4.12.0
Time: 3039ms
Built at: 06/10/2018 9:42:17 PM
Asset Size Chunks Chunk Names
bundle.js 70.4 KiB 0 [emitted] main
[1] (webpack)/buildin/module.js 497 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./src/index.js 218 bytes {0} [built]
+ 1 hidden module
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
配置文件當然不止這點功能悍赢，詳見 文檔。
執(zhí)行webpack货徙，它會自己查找是否有個叫webpack.config.js的文件左权，有就把它用起來。上面使用“--config”是為了說明可以為webpack指定配置文件痴颊，至于配置文件叫啥涮总，隨你便。
利用package.json
package.json為執(zhí)行npm提供配置信息祷舀。借助它可以避免在終端搞一大堆指令瀑梗。修改package.json如下
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
執(zhí)行npm run build ，等價于之前的npx webpack 裳扯。
npm run build
> webpack-demo@1.0.0 build /Users/Roy/Downloads/webpack-test/webpack-demo
> webpack
Hash: 39ac053a4c4975e616af
Version: webpack 4.12.0
Time: 407ms
Built at: 06/10/2018 10:06:42 PM
Asset Size Chunks Chunk Names
bundle.js 70.4 KiB 0 [emitted] main
[1] (webpack)/buildin/module.js 497 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./src/index.js 218 bytes {0} [built]
+ 1 hidden module
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
npm run build頂替了前面的npx抛丽，你可以在pack.json的“webpack”后添加前面用的--config參數(shù)：
"build": "webpack --config webpack.config.js"
結(jié)論
至此，項目的結(jié)構(gòu)如下：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
