webpack 是一個現代 JavaScript 應用程式的靜態模組打包器 (module bundler) 。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖 (dependency graph) ，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle 。

webpack 主要有四個核心概念:

• 入口 (entry)
• 輸出 (output)
• loader
• 外掛 (plugins)

入口 (entry)

入口會指示 webpack 應該使用哪個模組，來作為構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模組和庫是入口起點（直接和間接）依賴的。在 webpack 中入口有多種方式來定義，如下面例子：

單個入口（簡寫）語法:

const config = {
  entry: "./src/main.js"
}

物件語法:

const config = {
  app: "./src/main.js",
  vendors: "./src/vendors.js"
}

輸出 (output):

output 屬性會告訴 webpack 在哪裡輸出它建立的 bundles ，以及如何命名這些檔案，預設值為 ./dist:

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

loader

loader 讓 webpack 可以去處理那些非 JavaScript 檔案（ webpack 自身只理解 JavaScript ）。loader 可以將所有型別的檔案轉換為 webpack 能夠有效處理的模組，例如，開發的時候使用 ES6 ，通過 loader 將 ES6 的語法轉為 ES5 ，如下配置：

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
          test: 
 
/\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          options: [
            presets: ["env"]
          ]
      }
    ]
  }
}

外掛 (plugins)

loader 被用於轉換某些型別的模組，而外掛則可以做更多的事情。包括打包優化、壓縮、定義環境變數等等。外掛的功能強大，是 webpack 擴充套件非常重要的利器，可以用來處理各種各樣的任務。使用一個外掛也非常容易，只需要 require() ，然後新增到 plugins 陣列中。

// 通過 npm 安裝
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 用於訪問內建外掛 
const webpack = require('webpack'); 
 
const config = {
  module: {
    rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

利用 webpack 搭建應用

webpack.config.js

const path = require('path');
 
module.exports = {
  mode: "development", // "production" | "development"
  // 選擇 development 為開發模式， production 為生產模式
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: [
          presets: ["env"]
        ]
      }
    ]
  },
  plugins: [
    ...
  ]
}

上述例子構建了一個最簡單的配置，webpack 會從入口 main.js 檔案進行構建，通過 loader 進行js轉換，輸出一個為 bundle.js 的檔案，至此一整個過程就構建完成。