Webpack｜教學： package.json與webpack.config.js設定文件說明

Published in

Anna.Hsaio｜前端開發記

6 min readAug 21, 2019

當我們使用webpack啟用專案設定時package.json與webpack.config.js的設定文件是否讓你一頭霧水呢！？本篇教學將帶你了解package.json與webpack.config.js設定文件的常用參數、設定方法以及說明

package.json

package.json是npm啟動的設定檔，在系列文章中有稍微提過package.json的建立以及基本設定

當我們開始使用了webpack、pug、sass、vue等等輔助工具時，package.json中會多出dependencies、devDependencies、scripts…等等json陣列，而這些新增的元素是甚麼呢！？

1. dependencies：放置專案所需的編寫工具，例如：pug、sass、vue等等，這裡要特別注意dependencies支援外部連接方式

{
...
   "dependencies":{
      "aa": "git+https://github.com/....."
   }
...
}

2. devDependencies：放置測試工具、程式碼轉換器或者打包工具的專案plugins，例如：babel-loader、sass-loader

3. scripts：設定執行指令碼命令的npm命令列

1.package.json:
{
...
"scripts": {
   "build": "webpack --progress --colors --mode production",
},
...
}2.終端機：
輸入 npm run build，就會build webpack 編譯過後的檔案

4.repository：嵌入外部元件庫

{
   "repository": {
      "type": "git",
      "url": "git+https://github.com/....."
   },
}

webpack.config.js

webpack.config.js是webpack的核心，他負責編譯以及打包所有文件，要讓webpack讀懂什麼是html、css、js或是進階的編譯方式，例如：sass、pug、vue…等等就必須在這裡設定

1.webpack 基本設定說明

// webpack.config.js基本設定const path = require('path');module.exports = { //webpack起始設定
  entry: './src/main.js', //入口文件
  output: { //出口文件
    path: path.resolve(__dirname, './dist'), // 打包後儲存的目錄
    filename: './js/[name].js' //打包後的js檔名
  },
  module:{
    rules:[ //各類型檔案配置規則
      ...
      //以pug為例的設定方式
      {
         test: /\.pug$/,  //判斷.pug檔案
         use: ['html-loader','pug-html-loader'] //使用html-loader以及pug-html-loader來編譯檔案
      },
      ...
    ]
  },
  resolve:{ //配置索引，縮短webpack的解析時間，提升打包速度
     ...
     alias: {
       'vue': 'vue/dist/vue.js'
     },
     ...
  },
  resolveLoader: { //用來判斷webpack Loader的resolve配置
     ...
     extensions: ['.js', '.vue', '.styl'],
     ...
  },
  plugins:[ //Loader無法處理的部分由plugins來解決
     ...
     new HtmlWebpackPlugin({
        template:`./src/${name}.pug`, //pug的檔案位置
        filename: `${name}.html`, //打包後轉換的檔案名稱與副檔名
     }),
     ...
  ]
};

2.webpack 執行監聽動作

當每次進行一次檔案修改/編譯時，都要手動執行一次npm run build這個重複的動作，我們可以藉由 webpack.config.js的參數watch: true來省略，或是在package.json中加入 — watch

/*------執行監聽文件------*/
1.webpack.config.js：output: {
      //...
},
watch: true/*------或是使用------*/2.package.json{
  //...
  "scripts": {      
      "build": "webpack --progress --colors --mode production --watch"
      //--progress：編譯文件打包的進度
      //--colors：編譯文件打包的顏色區別
      //--mode production：development模式為開發中的模式，production則為build後會壓縮優化檔案大小的模式
      //--watch：監聽文件編譯/修改
  },
  //...
}

3.如何透過webpack在本機端預覽網站呢！？

只需要在package.json的scripts中加入一個執行scripts，再到webpack.config.js中加入本機測試的代碼，完成後在終端機執行npm run dev就可以囉！

/*------透過webpack在本機端預覽網站------*/
1.package.json：
{
   //...
   "scripts": {
      //...
      "dev": "webpack-dev-server --progress --colors"
      //...
   },
   //...
}2.webpack.config.js：
{
   //...
   devServer: {
      //...
      port: 8080
      //...
   },
   //...
}

而我的webpack.config.js及package.json設定放置在GitHub上(會不定時更新)，下一篇將介紹webpack的多入口/多出口配置方式，有興趣的朋友可以參考也歡迎與我分享你喜歡的配置方式，希望本篇的教學可以讓你更了解webpack.config.js和package.json是在做什麼！

那我們下篇再見囉~