webpack（4）webpack.config.js配置和package.json配置

Silent丿丶黑羽發表於2021-07-11
WebPackageJSON

前言

上一篇文章我們使用webpack打包成功了，但是每次都要自己手動輸入打包的檔案地址和打包到哪裡去的地址，非常麻煩，所以這裡介紹使用配置檔案進行打包
 

webpack.config.js

首先我們建立一個js檔案webpack.config，當期我們配置最簡單的匯入匯出，程式碼如下：

const path = require('path')

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

現在我們使用打包命令時，不用再跟上打包檔案地址等等引數，只需輸入如下命令

webpack --mode development

這樣我們就會將檔案打包到dist資料夾下
 

package.json

一般開發前端專案，我們都會使用npm init進行初始化專案，會生成一個package.json檔案
 

為什麼要使用npm init初始化專案

在node開發中使用npm init會生成一個pakeage.json檔案，這個檔案主要是用來記錄這個專案的詳細資訊的，它會將我們在專案開發中所要用到的包，以及專案的詳細資訊等記錄在這個專案中。方便在以後的版本迭代和專案移植的時候會更加的方便。也是防止在後期的專案維護中誤刪除了一個包導致的專案不能夠正常執行。使用npm init初始化專案還有一個好處就是在進行專案傳遞的時候不需要將專案依賴包一起傳送給對方，對方在接受到你的專案之後再執行npm install就可以將專案依賴全部下載到專案裡。
 

npm init -y

接著我們在專案的根目錄輸入npm init -y就會生成一個package.json檔案，內容如下：

{
  "name": "webpackTest2",   // 專案名字
  "version": "1.0.0",              // 專案版本
  "description": "",              // 專案描述
  "main": "webpack.config.js",   // 專案入口
  "scripts": {                      // 專案指令碼
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],               // 專案關鍵字
  "author": "",                  // 作者
  "license": "ISC"            // 專案證書
}

 

本地安裝webpack

一般我們開發階段，安裝專案需要依賴的環境都使用--save -dev

  • --save：本地安裝
  • -dev：開發時依賴，也就是開發階段使用的依賴包

接著使用命令本地安裝webpack

npm install webpack --save-dev

安裝成功後，重新開啟package.json，會多出如下程式碼

"devDependencies": {
    "webpack": "^5.44.0"
  }

這就是開發時依賴，開發環境中依賴webpack5.44.0的版本
 

通過npm來打包webpack

最後我們不希望在命令列輸入webpack來打包，我們希望使用npm來打包，我們只需要在package.json中的script中，新增如下命令

"scripts": {
    "build": "webpack --mode development"
  },

之後我們打包，只需要在終端輸入npm run build就可以自動打包了
 

相關文章