原文：https://blog.csdn.net/simpleasong/article/details/123024224

前言

實際上，webpack-cli給我們提供了豐富的終端命令列指令，可以通過webpack --help來檢視。同樣，需要在前面加上npx

npx webpack --help
1

一、設定入口檔案

1. 進入上一節的setup目錄，手動刪除dist資料夾。

2. 輸入指令

   npx webpack --entry ./src/index.js --mode production
   

   –entry表示設定後面路徑的檔案為入口檔案，–mode指定環境，production為生產環境。
   執行之後發現setup目錄下同樣生成了dist資料夾及其子檔案main.js。
   

3. 到這裡就會發現，使用這種命令列來打包檔案，真的很不方便，也不直觀，而且還不能儲存我們的一些配置。因此，webpack給我們提供了通過配置檔案去自定義配置引數的能力。

二、通過配置檔案來配置引數

1. 在setup目錄下新建webpack.config.js檔案
   
   這個檔名不能隨便取，因為這是webpack自動讀取的

2. 這個檔案是在Node.js裡面執行的，因此，定義模組的時候要使用Node.js的CommonJs模組，所以使用module.exports來定義。
   

3. 首先，設定入口entry，還是以index.js為入口檔案。

   module.exports = {
   	entry:'./src/index.js',
   }
    
   

4. 設定出口output，filename屬性指定輸出檔案的檔名，path屬性指定輸出路徑。

   module.exports = {
       entry:'./src/index.js',
       output:{
           filename:'bundle.js',
           path:'./dist'
       }
   }
   

5. 執行npx webpack命令

   npx webpack
   

   發現報錯了，提示輸出路徑“./dist”不是一個絕對路徑
   

6. 使用Node.js的方法將輸出路徑設定為絕對路徑，第一個引數__dirname表示當前webpack.config.js所在的物理路徑，第二個引數表示基於第一個引數的路徑，將檔案解析到這個路徑下，這樣就指定了一個絕對路徑。

   const path = require('path');
   module.exports = {
       entry:'./src/index.js',
       output:{
           filename:'bundle.js',
           path:path.resolve(__dirname, './dist')
       },
   }
   

7. 設定mode的值，先給一個“none”，不然執行webpack命令會報警告。

   const path = require('path');
   module.exports = {
       entry:'./src/index.js',
       output:{
           filename:'bundle.js',
           path:path.resolve(__dirname, './dist')
       },
       mode:'none'
   }
   

8. 接下來執行npx webpack就可以了

   npx webpack
   

   執行成功後可以看到在dist資料夾下產生了一個bundle.js檔案。
   

9. 想看效果同樣可以在index.html頁面中將bundle.js引入進來，然後在瀏覽器執行，最終同樣打印出“hellow world”。