webpack（2）webpack核心概念

前言

  本質上，webpack 是一個用於現代 JavaScript 應用程序的 靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部構建一個 依賴圖(dependency graph)，此依賴圖對應映射到項目所需的每個模塊，並生成一個或多個 bundle。接下來我們就會使用webpack來進行打包
 

webpack的概念

在開始前我們需要先理解一些核心概念：

• 入口(entry)
• 輸出(output)
• loader
• 插件(plugin)
• 模式(mode)
• 瀏覽器兼容性(browser compatibility)
• 環境(environment)
   

入口(entry)

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

默認值是 ./src/index.js，但你可以通過在 webpack.config.js 文件中配置 entry 屬性，來指定一個（或多個）不同的入口起點。例如：

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

 

單個入口（簡寫）語法

entry 屬性的單個入口語法，參考下面的簡寫：

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

 

我們也可以將一個文件路徑數組傳遞給 entry 屬性，這將創建一個所謂的 "multi-main entry"。在你想要一次注入多個依賴文件，並且將它們的依賴關系繪制在一個 "chunk" 中時，這種方式就很有用。

// webpack.config.js
module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

總結：當你希望通過一個入口為應用程序或工具快速設置 webpack 配置時，單一入口的語法方式是不錯的選擇。然而，使用這種語法方式來擴展或調整配置的靈活性不大。
 

對象語法

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

對象語法會比較繁瑣。然而，這是應用程序中定義入口的最可擴展的方式。

對象可以使用如下屬性：

• dependOn: 當前入口所依賴的入口。它們必須在該入口被加載前被加載。
• filename: 指定要輸出的文件名稱。
• import: 啟動時需加載的模塊。
• library: 指定 library 選項，為當前 entry 構建一個 library。
• runtime: 運行時 chunk 的名字。如果設置了，就會創建一個以這個名字命名的運行時 chunk，否則將使用現有的入口作為運行時。
• publicPath: 當該入口的輸出文件在瀏覽器中被引用時，為它們指定一個公共 URL 地址。

// webpack.config.js
module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

 

輸出(output)

可以通過配置 output 選項，告知 webpack 如何向硬盤寫入編譯文件。注意，即使可以存在多個 entry 起點，但只能指定一個 output 配置。
 

用法

在 webpack 配置中，output 屬性的最低要求是，將它的值設置為一個對象，然后為將輸出文件的文件名配置為一個 output.filename：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

此配置將一個單獨的 bundle.js 文件輸出到 dist 目錄中。
 

多個入口起點

如果配置中創建出多於一個 "chunk"（例如，使用多個入口起點或使用像 CommonsChunkPlugin 這樣的插件），則應該使用占位符(substitutions)來確保每個文件具有唯一的名稱。

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

// 寫入到硬盤：./dist/app.js, ./dist/search.js

 

loader

什么是loader?

• loader是webpack中非常核心的一個概念
• webpack用來做什么？
  • 在我們之前的實例中，我們主要是用webpack來處理js代碼，並且webpack會自動處理js中的依賴
  • 但是，在開發中我們不僅僅有js代碼要處理，我們也需要加載css、圖片，也包括一些高級的將es6轉成es5的代碼，將Ts轉成es5的代碼，將scss、less轉成css代碼等等
  • 對於webpack本身的能力來說，對於這些轉化是不支持的
  • 但是我們給webpack擴展對應的loader即可
• loader的使用過程
  • 步驟一：通過npm安裝對應使用的loader
  • 步驟二：在webpack.config.js中的modules關鍵字進行配置
• 大部分loader我們都可以在官網中找到，並學習對應的用法