Webpack綜述

WebPack是一個現代Js應用的靜態模塊打包器，使用Webpack處理應用時，它會遞歸地構建一個依賴關係圖，其中包含了應用所需的各個模塊，並將這些模塊打包爲一個或多個bundle。
Webpack有四個核心概念

• 入口（Entry）
• 輸出（Output）
• Loader
• 插件（Plugins）

入口

它負責指示Webpack使用哪個模塊作爲構建內部依賴圖的起始點，進入起點後，Webpack會找出起點所依賴的模塊和庫，Webpack中有多種方式來定義起點，例如：

//單個入口（簡化）
const config = {
  entry: "./src/main.js"
}

//對象語法
const config = {
  app: "./src/main.js",
  vendors: "./src/vendors.js"
}

輸出

output指示webpack在哪裏輸出它創建的bundle以及如何命名它們，例如：

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

loader

loader使得webpack可以處理非js文件（webpack本身只理解js），loader可以將所有文件轉換爲webpack能夠處理的模塊，例如在開發時使用ES6，再通過loader轉換爲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"]
          ]
      }
    ]
  }
}

插件

插件的功能則更爲強大，可以做包括打包優化、壓縮、定義環境變量等事宜，插件配置只需要使用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'})
  ]
};