一、概念介紹

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

它是高度可配置的，但是，在開始前你需要先理解四個核心概念：

入口(entry)

輸出(output)

loader

外掛(plugins)

1、 入口(entry)

指定webpack從哪個模組開始構建專案，通過一下配置指定一個入口起點(或多個入口起點)，被處理到稱之為 bundles 的檔案中：

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

2、出口(output)

處理打包生成的 bundles 檔案，如指定輸出檔案位置，檔名等。

// webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js',output: {
    path: path.resolve(__dirname,'dist'),filename: 'test_name.bunlde.js'
  }
}

3、loader

loader 作用是將所有檔案型別轉換成webpack能處理的有效模組，然後就可以通過webpack將檔案打包。

本質上，webpack loader將所有型別檔案轉換成應用程式的依賴圖可以直接引用的模組。

特殊: 只有webpack支援 import 匯入任何型別模組，如 .css,.vue 等檔案。

webpack 配置 loader的兩個目標：

1.識別需要對應 loader 處理的檔案。(使用test屬性)

2.轉換檔案使其能夠新增到依賴圖並最終新增到 bunlde 中。(使用use屬性)

// webpack.config.js
const path = require('path');
const config = {
 entry: './path/to/my/entry/file.js',output: {
  path: path.resolve(__dirname,filename: 'my-first-webpack.bundle.js'
 },module: {
  rules: [
   { test: /\.txt$/,use: 'raw-loader' } 
   // test/use 兩個屬性是必須的
  ]
 }
}
module.exports = config;

4、外掛(plugins)

使用外掛可以執行範圍更廣的任務。通過 require() 引用後新增在 plugins 陣列中。

另外如果需要多次使用同一個外掛，則使用 new 操作符來建立它的一個例項。

安裝html-webpack-plugin：

npm install html-webpack-plugin --save-dev
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用於訪問內建外掛
const path = require('path');
const config = {
 entry: './path/to/my/entry/file.js',use: 'raw-loader' }
  ]
 },plugins: [
  new webpack.optimize.UglifyJsPlugin(),new HtmlWebpackPlugin({template: './src/index.html'})
 ]
};
module.exports = config;

二、入口起點(Entry Points)

webpack的 entry 屬性不僅可以配置單個入口，還可以配置多個入口：

1、單個入口(簡寫)配置

用法：entry: string|Array<string>

簡單使用 ：

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

entry 屬性的單個入口配置方式：

const config = {
  entry:{
    main:'./path/to/my/entry/file.js'
  }
}

若向 entry 傳入 [檔案路徑(file path)陣列]，將建立 多個主入口，常常用在需要同時注入多個檔案，並將它們的依賴導向(graph)到一個chunk時。

2、多個入口(簡寫)配置

物件語法

用法：entry: {[entryChunkName: string]: string|Array<string>}

// webpack.config.js
webpack.config.js
const config = {
 entry: {
  app: './src/app.js',vendors: './src/vendors.js'
 }
};

雖然語法繁瑣，但這是應用程式中定義入口的最可擴充套件的方式。

“可擴充套件的 webpack 配置”是指，可重用並且可以與其他配置組合使用。這是一種流行的技術，用於將關注點(concern)從環境(environment)、構建目標(build target)、執行時(runtime)中分離。然後使用專門的工具（如 webpack-merge）將它們合併。

常見場景

列出一些常見的入口配置和實際案例：

(1)分離 應用程式(app) 和 第三方庫(vendor) 入口

// webpack.config.js
const config = {
 entry: {
  app: './src/app.js',vendors: './src/vendors.js'
 }
};

webpack 從 app.js 和 vendors.js 開始構建，並且他們是完全分離互相獨立，為了支援提供更佳 vendor 分離能力的 DllPlugin，考慮移除該場景。

(2)多頁面應用程式

// webpack.config.js
const config = {
 entry: {
  pageOne: './src/pageOne/index.js',pageTwo: './src/pageTwo/index.js',pageThree: './src/pageThree/index.js'
 }
};

這樣告訴 webpack 需要 3 個獨立分離的依賴圖，

使用 CommonsChunkPlugin 為每個頁面間的應用程式共享程式碼建立 bundle。

由於入口起點增多，多頁應用能夠複用入口起點之間的大量程式碼/模組，從而可以極大地從這些技術中受益。

更多關於Webpack基礎教程請點選下面的相關文章