學(xué)習(xí) webpack 之前，首先要了解什么是 webpack督弓，webpack 解決了什么問題。
webpack 是什么
本質(zhì)上摔刁，webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)瓤荔。
當(dāng) webpack 處理應(yīng)用程序時净蚤，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個模塊输硝，然后將所有這些模塊打包成一個或多個 bundle今瀑。
下面，就通過一個簡單的例子來了解下 webpack 的使用.
從一個簡單的例子開始
創(chuàng)建一個目錄webpack-demo, 然后npm init -y創(chuàng)建項(xiàng)目点把。
修改項(xiàng)目目錄結(jié)構(gòu)如下：
webpack-demo
├─ src
│ ├─ index.js
│ └─ math.js
├─ index.html
├─ package-lock.json
└─ package.json
在math.js, index.js分別加入以下代碼：
// math.js
const add = (a, b) => {
return a + b;
};
export default add;
// index.js
import add from './math.js';
console.log(add(1, 2));
然后我們在index.html中引入index.js:
<body>
<script src="./index.js"></script>
</body>
然后我們在瀏覽器中打開index.html橘荠，會發(fā)現(xiàn)控制臺報(bào)錯了：
這是因?yàn)闉g覽器不能夠識別 ES6 里的 import 語句導(dǎo)致的。
通過 webpack 打包郎逃，就能夠?qū)?code>index.js,
main.js打包成一個文件哥童，且瀏覽器能夠識別運(yùn)行。
webpack 打包
1. 安裝 webpack
直接使用 npm 安裝即可
npm i webpack webpack-cli -D
2. 運(yùn)行 webpack
webpack 是開箱即用的褒翰，直接運(yùn)行 webpack 命令即可贮懈。
npx webpack
打包后，項(xiàng)目根目錄會生成一個dist文件优训，里面有個main.js文件（打包后的 js 文件）朵你。
我們在index.html中引入main.js:
<body>
<script src="./dist/main.js"></script>
</body>
然后在瀏覽器打開, 會發(fā)現(xiàn)代碼執(zhí)行的結(jié)果 3
這樣我們就通過 webpack 將index.js與math.js打包成了一個 js 文件main.js。
配置文件
通過命令行打包文件揣非，不能夠直觀的看到我們的一些配置撬呢。因此 webpack 提供了通過文件去自定義配置的能力。在根目錄下新建webpack.config.js文件：
在文件中加入以下代碼：
// webpack.config.js
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
mode: 'development'
};
webpack 運(yùn)行在 node 環(huán)境中妆兑，使用的是 node 中的 commonJs 模塊語法，所以使用module.exports來定義毛仪。
ouput 是輸出文件名和路徑搁嗓。需要注意的是，輸出路徑必須是絕對路徑箱靴。因此腺逛，這里我們使用了path.resolve(__dirname, './dist')來獲取絕對路徑。
mode 是 webpack 的打包模式衡怀，一般有 development 和 production 兩種棍矛。
然后我們通過npx webpack命令來打包，會發(fā)現(xiàn) dist 中出現(xiàn)了一個bundle.js文件抛杨，這就是我們打包生成的文件够委。
在
index.html中引入bundle.js:
<body>
<script src="./dist/bundle.js"></script>
</body>
然后在瀏覽器打開, 同樣會出現(xiàn)代碼執(zhí)行的結(jié)果 3
總結(jié)
- 安裝 webpack
npm i webpack webpack-cli -D - 運(yùn)行 webpack
npx webpack - 默認(rèn) webpack 配置文件 webpack.config.js (entry, output, mode)
參考資料：
