webpack4系列教程（二）：建立專案，打包第一個JS檔案
傳送門：
1. 建立專案
1.1 初始化一個專案
首先安裝nodejs，開啟 nodeJs官網 直接下載安裝即可，安裝完畢後開啟命令列工具，進入你的專案資料夾，執行
npm init 進行專案的初始化：
過程中會讓你填寫專案名、版本、描述、倉庫地址、關鍵字等資訊，可以不填一路回車，執行完畢後會在根目錄下建立一個 package.json 檔案，這樣就初始化結束了。
1.2 安裝webpack
由於在webpack4中已經不再預設安裝 webpacl-cli，所以我們要手動安裝，在命令列執行 npm i webpack webpack-cli -D 即可。對於大多數專案，建議本地安裝。這可以使我們在引入破壞式變更(breaking change)的依賴時，更容易分別升級專案。
2. 打包第一個JS檔案
首先，我們在根目錄下建立一個 webpack.config.js 檔案和一個src資料夾。然後在src中建立一個 main.js 檔案，如下：
在 main.js 中寫一行
alert('hello world')然後開啟 webpack.config.js ，進行webpack的配置：
const path = require('path') let config = { mode: 'none', entry: { main: path.join(__dirname, './src/main.js') }, output: { filename: '[name].bundle.js', path: path.join(__dirname, './dist') } } module.exports = config
我們設定了一個名為 main 的入口，並以 src 下的 main.js 作為入口檔案，然後輸出到根目錄下的 dist 資料夾中。
在webpack4中，我們需要設定 mode 屬性，用來決定當前是development還是production環境，webpack會根據此值來進行一些預設操作，兩種環境的不同配置後面的博文會詳解，這裡我們設定為 'none' ，來避免預設操作。前文已經說過，path 是 nodeJs中的核心模組用來操作路徑，__dirname 表示檔案的當前路徑（此時為根路徑）。而 output中的filename屬性，[name] 表示入口的名稱，此處就是 main。
接下來開啟 package.json 檔案，來編寫一條命令執行webpack的打包。在 script 中新增：
"build": "webpack --config webpack.config.js --progress --colors"webpack --config path/to/your/file/file.js 表示執行某個配置檔案，--progress可以讓我們看到打包的進度 ， --colors 開啟命令列顏色顯示，更多的webpack命令引數大家可以另行查閱。
然後就可以在命令列執行：npm run build，執行完畢後，我們可以看到，在根目錄下多了一個 dist 資料夾 並有一個 main.bundle.js檔案，這就是webpack為我們打包出來的靜態資源，而檔案路徑就是我們在 output 中設定的值。
為了演示打包好的 main.bundle.js ，我們在根目錄下建立一個 index.html ，並引入main.bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/main.bundle.js"></script>
</body>
</html>在瀏覽器中開啟 index.html，可見main.js中的程式碼已經被執行了：
在IDE中開啟main.bundle.js，程式碼的最底部可以看到我們在main.js中寫的程式碼。
至此，我們的第一次 webpack 打包就成功了。
本人才疏學淺，不當之處歡迎批評指正。