【轉】webpack使用方法（三）：自定義webpack配置

原文：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”。