目錄

1. 什麼是webpack

2. webpack核心概念

 2.1 入口（entry）

2.2 出口（output）

 2.3 loader

2.4 外掛（plugins）

1. 什麼是webpack

先來看看官網對webpack的介紹 ：

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

。

簡單來說webpack就是一個JavaScript的打包器，將各種模組（module）打包成資原始檔；還可以通過 Code Spliting 來把程式碼分離到不同的 bundle 中，然後可以按需載入或並行載入這些檔案；webpack 可以使用 loader 來預處理檔案，這允許你打包除了JavaScript 之外的任何靜態資源。

官網首頁很清晰的展示了webpack的主要功能：

我們可以看到，一堆 modules 經過 webpack 打包處理成了各種靜態資源。這就是 webpack

2. webpack核心概念

在開始學習 webpack 之前，你需要了解 webpack 的四個核心概念： 

• 入口（entry）
• 出口（output）
• loader
• 外掛（plugins） 

 2.1 入口（entry）

入口指示 webpack 應該使用哪個模組，來開始構建其內部依賴。進入入口後，webpack 會找出有哪些模組和庫是與入口相依賴的。

我們可以在webpack配置中配置entry屬性，來設定一個或多個入口起點。以下是一個簡單的entry配置：

const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }
}
module.exports = config
 

2.2 出口（output）

 設定output是為了告訴webpack要在哪裡輸出其建立的bundle，並且可以對bundle命名。示例：

const path = require('path')

const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }，
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  }
}

module.exports = config

我們通過 output.filename 來設定輸出bundle的檔名， output.path 來設定 bundle 的輸出路徑 

 path 是 nodeJs 中的核心模組，用來處理專案中的路徑。

 2.3 loader

由於 webpack 只認識 JavaScript 程式碼，因此就需要藉助其他方法來處理那些非 JavaScript 檔案，如 css、image、font等。而 loader 可以將所有型別的檔案處理成 webpack 能夠識別的有效模組，然後再對其進行處理。

loader 中有兩個重要屬性：

1、test屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些檔案，通常是一個正則表示式；

2、use屬性，表示進行轉換時，應該使用哪個 loader；

const path = require('path')

const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }，
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    loaders: [
      {
        test: /\.ejs$/,
        use: ['ejs-loader']
      }
    ]
  }
}

module.exports = config

以上示例中loader的配置相當於告訴webpack在遇到 .ejs 的檔案時，在打包之前先用 ejs-loader 裝換一下。

2.4 外掛（plugins）

loader 被用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務。想要使用一個外掛，你只需要 require() 它，然後把它新增到 plugins 陣列中。多數外掛可以通過選項(option)自定義。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 通過 npm 安裝

const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }，
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  },
  module: {
    loaders: [
      {
        test: /\.ejs$/,
        use: ['ejs-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack demo',
      template: path.join(__dirname, './index.html')
    })
  ]
}

module.exports = config

HtmlWebpackPlugin 將為你生成一個 HTML5 檔案， 其中包括使用 script 標籤的 body 中的所有 webpack 包，webpack 提供提供了許多功能強大的外掛，查閱外掛列表獲取更多外掛的使用方法。

                                                                                                                                         本人才疏學淺，不當之處歡迎批評指正。