一、概念介紹

本質(zhì)上，webpack 是一個(gè)現(xiàn)代JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。

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

入口(entry)

輸出(output)

loader

插件(plugins)

1、 入口(entry)

指定webpack從哪個(gè)模塊開始構(gòu)建項(xiàng)目，通過一下配置指定一個(gè)入口起點(diǎn)(或多個(gè)入口起點(diǎn))，被處理到稱之為 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 作用是將所有文件類型轉(zhuǎn)換成webpack能處理的有效模塊，然后就可以通過webpack將文件打包。

本質(zhì)上，webpack loader將所有類型文件轉(zhuǎn)換成應(yīng)用程序的依賴圖可以直接引用的模塊。

特殊: 只有webpack支持 import 導(dǎo)入任何類型模塊，如 .css,.vue 等文件。

webpack 配置 loader的兩個(gè)目標(biāo)：

1.識別需要對應(yīng) loader 處理的文件。(使用test屬性)

2.轉(zhuǎn)換文件使其能夠添加到依賴圖并最終添加到 bunlde 中。(使用use屬性)

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

4、插件(plugins)

使用插件可以執(zhí)行范圍更廣的任務(wù)。通過 require() 引用后添加在 plugins 數(shù)組中。

另外如果需要多次使用同一個(gè)插件，則使用 new 操作符來創(chuàng)建它的一個(gè)實(shí)例。

安裝html-webpack-plugin：

npm install html-webpack-plugin --save-dev
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于訪問內(nèi)置插件
const path = require('path');
const config = {
 entry: './path/to/my/entry/file.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'my-first-webpack.bundle.js'
 },
 module: {
  rules: [
   { test: /\.txt$/, use: 'raw-loader' }
  ]
 },
 plugins: [
  new webpack.optimize.UglifyJsPlugin(),
  new HtmlWebpackPlugin({template: './src/index.html'})
 ]
};
module.exports = config;

二、入口起點(diǎn)(Entry Points)

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

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

用法：entry: string|Array<string>

簡單使用 ：

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

entry 屬性的單個(gè)入口配置方式：

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

若向 entry 傳入 [文件路徑(file path)數(shù)組]，將創(chuàng)建 多個(gè)主入口，常常用在需要同時(shí)注入多個(gè)文件，并將它們的依賴導(dǎo)向(graph)到一個(gè)chunk時(shí)。

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

對象語法

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

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

雖然語法繁瑣，但這是應(yīng)用程序中定義入口的最可擴(kuò)展的方式。

“可擴(kuò)展的 webpack 配置”是指，可重用并且可以與其他配置組合使用。這是一種流行的技術(shù)，用于將關(guān)注點(diǎn)(concern)從環(huán)境(environment)、構(gòu)建目標(biāo)(build target)、運(yùn)行時(shí)(runtime)中分離。然后使用專門的工具（如 webpack-merge）將它們合并。

常見場景

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

(1)分離 應(yīng)用程序(app) 和 第三方庫(vendor) 入口

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

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

(2)多頁面應(yīng)用程序

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

這樣告訴 webpack 需要 3 個(gè)獨(dú)立分離的依賴圖，

使用 CommonsChunkPlugin 為每個(gè)頁面間的應(yīng)用程序共享代碼創(chuàng)建 bundle。

由于入口起點(diǎn)增多，多頁應(yīng)用能夠復(fù)用入口起點(diǎn)之間的大量代碼/模塊，從而可以極大地從這些技術(shù)中受益。

更多關(guān)于Webpack基礎(chǔ)教程請點(diǎn)擊下面的相關(guān)文章

最新評論