概念

本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(static module bundler)。在 webpack 處理應用程式時，它會在內部建立一個依賴圖(dependency graph)，用於對映到專案需要的每個模組，然後將所有這些依賴生成到一個或多個bundle。

首先安裝 webpack如下所示

cnpm i webpack webpack-cli webpack-dev-server -g
//或
npm i webpack webpack-cli webpack-dev-server -g

來咱們開始學習webpack 

 JavaScript 模組和 webpack 模組的資訊。

 在開始前你需要先理解它的核心概念：

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

本文件旨在給出這些概念的高度概述，同時提供具體概念的詳盡相關用例。 

一.入口(entry）

入口起點(entry point)指示 webpack 應該使用哪個模組，來作為構建其內部依賴圖的開始，webpack 會找出有哪些模組和 library 是入口起點（直接和間接）依賴的。

預設值是 ./src/index.js

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

從 入口起點 章節可以瞭解更多資訊。

二，出口（output） 

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

你可以通過在配置中指定一個 output 欄位，來配置這些處理過程：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

三，外掛(plugins)

loader 被用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務，外掛的範圍包括：打包優化、資源管理和注入環境變數。

要使用一個外掛，你只需要 require() 它，然後把它新增到 plugins 陣列中。多數外掛可以通過選項(option)自定義。你也可以在一個配置檔案中因為不同目的而多次使用同一個外掛，這時需要通過使用 new 操作符來建立它的一個例項。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用於訪問內建外掛

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

在上面的示例中，html-webpack-plugin 會為你的應用程式生成一個 html 檔案，然後自動注入所有生成的 bundle。

四，模式  

通過將 mode 引數設定為 development, production 或 none，可以啟用對應環境下 webpack 內建的優化。預設值為 production。

module.exports = {
  mode: 'production'
};

五，瀏覽器相容性 

webpack 支援所有 ES5 相容（IE8 及以下不提供支援）的瀏覽器。webpack 的 import() 和 require.ensure()需要環境中有 Promise。如果你想要支援舊版本瀏覽器，你應該在使用這些 webpack 提供的表示式之前，先 載入一個 polyfill。

想了解更多點選這裡