本文首發自「慕課網」，想了解更多IT幹貨内容，程式員圈内熱聞，歡迎關注！
作者| 慕課網精英講師 三水清
今天，我們通過搭建一個使用 Webpack 打包的項目，來體驗下 Webpack 的零配置打包。
初始化項目
首先是建立項目，建立一個名字為zero-config的檔案夾，并且進入檔案夾使用npm init進行初始化：
# 建立目錄并且進入
mkdir zero-config && cd $_
# 初始化
npm init -y
# 安裝 webpack 和 webpack-cli到開發依賴
npm i webpack --save-dev
npm i webpack-cli --save-dev
建立目錄
建立src目錄，放置我們的源碼，目錄結構如下：
└── src
├── hello.js
├── index.js
└── world.js
hello.js、 world.js和index.js三個檔案内容如下：
// hello
module.exports = 'hello';
// world
module.exports = 'world';
// index
const hello = require('./hello');
const world = require('./world');
console.log(`${hello} ${world}`);
這時候我們使用 webpack指令（如果全局安裝 webpack-cli 包的話）可以直接體驗 Webpack 打包效果。
TIPS: npx 是一個友善開發者通路 node_modules 内的 bin 指令行的小工具，npx webpack -v 相當于執行了 node ./node_modules/webpack/bin/webpack -v ，npx 在開發中非常友善，推薦安裝：npm install -g npx 。
npm scripts
下面，我們打開package.json檔案，然後添加scripts字段：
"scripts": {
"build": "webpack"
}
添加完儲存後，在項目目錄下執行npm run build，看到如下執行結果：
執行成功，index.js 檔案被打包到了dist檔案夾下了，同時提示我們預設使用了production mode，即生産環境，打開dist/main.js，裡面的代碼的确是被壓縮的，說明是生産環境打包；下面繼續修改package.json添加scripts：
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
這時候再執行npm run dev，結果如下：
嗯，這次沒有壓縮，而且也不報 warning 了！
Tips: Webpack 的打包環境有 production 和 development 兩種，分别對應生産環境和開發環境，生産環境預設配置包括壓縮等常用的配置。
修改打包輸出目錄
通過上面的示範，我們得到下面的結論：
- Webpack 預設的入口檔案是src/index.js；
- Webpack 的預設輸出目錄是dist/main.js。
我們如果要修改 Webpack 的預設輸出目錄，需要用到 Webpack 指令的--output，我們将上面的 npm scripts 做下修改：
"scripts": {
"dev": "webpack --mode development --output ./output/main.js",
"build": "webpack --mode production --output ./output/main.js"
}
這時候再執行npm run build，則 webpack 會将打包之後的檔案輸出到output/main.js路徑了：
使用 Loader 來做 ES6 文法轉換
現在，我們将之前的代碼用的是 ES6 的 Module 文法進行重寫，這在普通的浏覽器執行起來可能會因為文法「太先進」而報錯，是以我們需要使用 Babel 來對 ES6 文法的代碼進行轉換。
在 src 下建立一個 es 的檔案夾，将 ES6 文法的代碼放進去。
// hello.es.js
export default 'hello';
// world.es.js
export default 'world';
// index.es.js
import hello from './hello';
import world from './world';
console.log(`${hello} ${world}`);
這時需要修改下package.json的 scripts 字段，将預設打包的入口檔案（src/index.js）修改為src/es/index.js位址：
"scripts": {
"dev": "webpack --mode development ./src/es/index.js",
"build": "webpack --mode production ./src/es/index.js"
}
這時候執行npm run dev的打包出來的是 ES6 文法的代碼，在一些老點的浏覽器或者移動終端浏覽器中都會報錯，這時候就需要 Babel 來轉換 ES6 文法了。
通過 Babel 來轉換 ES6 文法
Babel 是 JavaScript 的一個編譯器，能夠将 ES6+ 文法轉換為 ES5 文法，保證浏覽器的相容性，後面的章節還會繼續介紹 Babel 的用法，這裡為了快速入門 webpack 是以從簡介紹。
Loader 是 Webpack 中的一個重要概念，通過 Loader 我們可以做一些跟檔案自身屬性相關的一些操作，比如這裡做的 ES6 文法轉換，用到的是babel-loader，這個 Loader 依賴@babel/core和@babel/preset-env。
是以首先安裝它們：
npm i @babel/core babel-loader @babel/preset-env --save-dev
然後在項目的根目錄下，建立一個 babel 的配置檔案.babelrc，内容如下：
{
"presets": ["@babel/preset-env"]
}
有了 babel-loader，可以使用 webpack 指令的--module-bind來指定對應的檔案需要經過怎樣的 Loader 處理，是以繼續修改 npm scripts：
"scripts": {
"dev": "webpack --mode development ./src/es/index.js --module-bind js=babel-loader",
"build": "webpack --mode production ./src/es/index.js --module-bind js=babel-loader"
}
添加完畢，執行npm run build，看下 dist/main.js的檔案，就是轉換後的 ES5 文法的打包結果了。
Tips：
下面介紹幾個 webpack-cli 的小技巧：
1.當項目逐漸變大或者使用生産環境打包的時候，Webpack 的編譯時間會變長，可以通過參數讓編譯的輸出内容帶有進度和顔色： webpack --progress --colors；
2. Webpack 的配置比較複雜，很容易出現錯誤，如果出問題，會列印一些簡單的錯誤資訊，我們還可以通過參數 --display-error-details 來列印錯誤詳情：webpack --display-error-details；
3.如果不想每次修改子產品後都重新編譯，那麼可以啟動監聽模式，開啟監聽模式後，沒有變化的子產品會在編譯後緩存到記憶體中，而不會每次都被重新編譯，是以監聽模式的整體速度是很快的：webpack --watch；
4. webpack-cli 支援兩個快捷選項：-d 和 -p ，分别代表一些常用的開發環境和生産環境的打包。
小結
在本文中，我們學習并且示範了使用 webpack-cli 指令來完成 Webpack 的零配置打包。webpack-cli 指令的選項比較多，詳細可以通過 webpack-cli 的文檔進行查閱，這裡總結我們日常用的最多的幾個選項（options）：
- –config：指定一個 Webpack 配置檔案的路徑；
- –mode：指定打包環境的 mode，取值為development和production，分别對應着開發環境和生産環境；
- –json：輸mode出 Webpack 打包的結果，可以使用webpack --json > stats.json方式将打包結果輸出到指定的檔案；
- –progress：顯示 Webpack 打包進度；
- –watch, -w：watch 模式打包，監控檔案變化之後重新開始打包；
- –color, --colors/–no-color, --no-colors：控制台輸出的内容是否開啟顔色；
- –hot：開啟 Hot Module Replacement模式，後面會詳細介紹；
- –profile：會詳細的輸出每個環節的用時（時間），友善排查打包速度瓶頸。
歡迎關注「慕課網」，發現更多IT圈優質内容，分享幹貨知識，幫助你成為更好的程式員！