Andy walking

# Webpack

# 基礎概念

每個 webpack.config.js 都會有以下的架構：

    module.export {
        entry:{},
        output:{},
        loaders:{},
        plugins:{},
        mode:'',
        browser-compatibility:'',
    }

這些就是 webpack 中的 core-concept ，理解它們才能理解 webpack 究竟幫忙做了哪些事，那我們開始吧：

# Entry

引入自官方文件 (opens new window)

An entry point indicates which module webpack should use to begin building out its internal dependency graph (opens new window).

入口點(entry point) 指示 webpack 以哪個檔案 (module) 作為打包( bundle )的位置。你可以透過 entry 這個屬性去自定義打包路徑。它分為單一路徑 跟多路徑

# 單一路徑設定：

  1. string
  2. array
  3. object (也能設定多路徑)
module.exports = {
  //obj
  entry: { main: "./path/to/my/entry/file.js" },
  //string
  entry: "/src/index.js",
  //array
  entry: ["./src/index.js"],
};

注意：當你沒有設定時，預設產生的打包路徑為：./src/index.js

https://webpack.js.org/concepts/entry-points/#single-entry-shorthand-syntax

# Output

決定打包(bundle)內容的輸出位置，以及如何命名被打包的檔案們，你可以透過 output 屬性去客製化內容。

webpack.config.js

const path = require("path");

module.export = {
  entry: "",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "",
  },
};

注意：

  1. 當你沒有設定時，預設輸出路徑為：/dist/main.js

# Loader

要知道 #webpack 本身只能編譯 JavaScript 跟 JSON 檔案類型，但在後面的筆記你會發現：連 css , png/jpg 等等都被打包，這就是透過 loader 來達成。

loader 會把這些檔案轉換為有效的模組檔案 以方便被裝入打包，你可透過 loader 去自定義，它內部包含兩種屬性：

  1. test ：符合 test 內容的檔案會被丟入轉換的 loader
  2. use：實際轉換的 loader ，常見的有babel-loader , sass-loader
const path = require("path");

module.export = {
  entry: "",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "",
  },
  loader: [
    {
      test: /\$/g,
      use: "babel-loader",
    },
  ],
};

在變更專案的打包工具要注意：並不是每個打包工具都像 webpack 能將任何透過 import 方式傳入的資料內容打包

# Plugins

https://webpack.js.org/concepts

# Mode

透過mode參數去使用 webpack 內建的==環境參數==，有 production,development,none

production / development / none 代表意思：

const path = require("path");

module.export = {
  entry: "",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "",
  },
  loader: [
    {
      test: /\$/g,
      use: "babel-loader",
    },
  ],
  mode: "development",
};

預設值為 production

# 參考資料:

  1. 淺談 Bundle、與 Vue-CLI (opens new window)

Tree Shaking →