webpack(2)--webapck自身的配置

致愛麗絲發表於2021-05-29
Web

上一記介紹了webpack的安裝和基本配置，本記將描述webpack自身的配置

一：指定webpack入口以及出口目錄以及輸出檔案

相信讀者在看完上一記後會有一點疑惑：為什麼執行webpack要配置src，為什麼會有構建打包檔案時會生成dist目錄且裡面會有一個main.js呢？

—mydemo
______dist
——————__main.js
______src
——————__index.js
——————__common.js
——————__esmodule.js
——index.html

這是由於webapck在打包過程中會預設將當前根目錄下src/index.js作為入口檔案，並會在根目錄下新建一個dist目錄，並將打包後的檔案(預設main.js)放置在dist的目錄中

如何配置入口以及出口目錄以及檔案 ？

三種辦法：

  1. 命令列
    當前根目錄下輸入npx webpack --entry 入口目錄及指定入口檔案 --output-path 出口目錄及指定出口目錄
// 入口：yentry.js   出口 ./output
npx webpack --entry ./src/myentry.js  --output-path ./output

缺點：命令列裡輸入，並不能確保效率
2. 在package.json中配置
在webpack中的script欄位，給打包命令(如build)配置方法1的程式碼

// script欄位下
"scripts":{
  "build" : "webpack  --entry ./src/myentry.js  --output-path ./output "
}

缺點：scripts內要寫太多冗餘程式碼，並不能一眼就看出要做的事情

3.在webpack.config.js中配置專案入口以及打包的目錄檔案(推薦)

webpack.config.js是一個用於webpack配置選項的檔案，可以在這裡做針對wenpack本身以及loader，plugins的配置。本質上是通過匯出一個配置物件，當webpack執行時會優先讀取這個檔案，如果有就執行這個物件內的配置

根目錄下新建webpack.config.js

// 由於webpack底層由node支援，因而使用node風格的匯出方式(讀者也可以嘗試使用esmodule方式，但是流程太過繁瑣，不推薦)
//webpack.config.js
const path = require('path') //引入node原生模組path
module.exports = {
  entry : './src/main.js'  
  output: {
    path: path.resolve(__dirname,'build'),  //構建完成輸出的目錄地址(需要絕對路徑)
    filename: 'mydemo.js'
  }

}

命令解析：

entry :入口檔案(需附帶目錄)
output: 輸出目錄以及檔案配置

path: 輸出的路徑，需要絕對路徑

path.resolve ： node中path模組的一個方法，用於拼接兩個字串
__dirname: 從磁碟到當前目錄下的絕對路徑
'build' : 構建後的目錄名，內部存放打包後的檔案
filename: 打包後的檔案(在build內部)

完成上述配置後，儲存再執行一遍npm run build即可

這樣就完成了webpack入口以及出口檔案的配置

二：重新命名webpack配置檔案

一定要將webpack.config.js作為webpack的配置檔案嗎？是否可以重新命名？

可以， 但不推薦，重新命名後會增加後續開發者閱讀程式碼難度。因而普遍約定不要重新命名webpack.config.js

重新命名webpack.config.js的方法：
package.json下的script欄位的build下輸入以下命令：

// package.json
"script":{
"build":"webpack --config renameconfig.js"
}

下一記：常用loader的安裝與配置

相關文章