1. entry（入口）
指示 webpack 從哪個文件開始打包
2. output（輸出）
指示 webpack 打包完的文件輸出到哪里去，如何命名等
3. loader（加載器）
webpack 本身只能處理js、json等資源，其他資源需要借助loader，webpack才能解析
4. plugins（插件）
擴展 webpack 的功能
5. mode（模式）
主要有兩種模式：
-開發(fā)模式：development
-生產(chǎn)模式及： production

Webpack 是基于 Node.js 運行的，所以采用 Common.js模塊化規(guī)范

webpack.config.js

const path = require('path');

module.exports = {

    // 入口
    entry: './src/main.js', // 相對路徑

    //輸出
    output: {

        // 文件的輸出路徑
        // __dirname nodejs的變量，代表當前文件的文件夾目錄
        path: path.resolve(__dirname, 'dist'), // 絕對路徑

        // 文件名
        filename: 'main.js'
    },

    // 加載器（loader）
    module: {
        rules: [
            // loader的配置
        ],
    },

    // 插件
    plugins: [
        // plugin插件的配置
    ],

    // 模式
    mode: 'development'
}

此處引入node.js的path模塊，path.resolve(__dirname, 'dist') 
__dirname指的就是當前文件(webpack.config.js)所在的文件目錄(demo文件夾)
并將內(nèi)容輸出到dist文件夾內(nèi)

  const path = require('path'); 
  path.resolve(__dirname, 'dist'), // 絕對路徑

當我們配置好webpack的配置文件，就可以使用 npx webpack 來進行打包了
而當我們使用下面的指令進行打包時，就不會去讀取webpack.config.js中的webpack配置了

npx webpack ./src/main.js --mode=development  
                   或
npx webpack ./src/main.js --mode=production

開發(fā)模式介紹
開發(fā)模式顧名思義就是我們開發(fā)代碼時使用的模式
這個模式下我們主要做兩件事：

1. 編譯代碼，使瀏覽器能識別運行
   開發(fā)時我們有樣式資源、字體圖標、圖片資源、html資源等，webpack默認都不能處理這些資源，所以我們要加載配置來編譯這些資源
2. 代碼質量檢查，樹立代碼規(guī)范
   提前檢查代碼的一些隱患，讓代碼運行時能更加健壯。
   提前檢查代碼規(guī)范和格式，統(tǒng)一團隊編碼風格，讓代碼更優(yōu)雅美觀。