一. 概念

需要理解四個(gè)核心概念：

• 入口(entry)
• 輸出(output)
• loader
• 插件(plugins)

1. 入口

1.1 基礎(chǔ)概念

指定 webpack 由哪個(gè)模塊作為項(xiàng)目構(gòu)建的開(kāi)始。

通過(guò)配置 entry 屬性，指定一個(gè)或多個(gè)起點(diǎn)，默認(rèn)值 ./src ：

module.exports = {
  entry: './path/leo/file.js'
};

1.2 單文件入口

用法：entry: string|Array

當(dāng) entry 中沒(méi)有配置入口的文件對(duì)象的名稱(chēng)，默認(rèn)使用的是 main 名稱(chēng)，輸出就是 main.js，即：

// 默認(rèn)情況
module.exports = {
  entry: './path/leo/file.js'
};

// 配置單個(gè)入口
const config = {
  entry: {
    main: './path/leo/file.js'
  }
};

可以看出，實(shí)際上 默認(rèn)情況 只是 配置單個(gè)入口 的簡(jiǎn)寫(xiě)形式。

另外，文件路徑我們也可以傳入一個(gè)數(shù)組，就會(huì)將多個(gè)依賴(lài)文件一起注入：

const config = {
  entry: {
    main: ['./path/leo/file.js', './path/leo/index.js', './path/leo/server.js']
  }
};

1.3 多文件入口

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

多個(gè)文件完全分離，互相獨(dú)立（每個(gè) bundle 中都有一個(gè) webpack 引導(dǎo)(bootstrap)），常見(jiàn)于只有一個(gè)入口的單頁(yè)面應(yīng)用。

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

2. 出口

2.1 基礎(chǔ)概念

指定 webpack 最終輸出的文件輸出位置和文件名等信息。

通過(guò)配置 output 屬性，指定輸出位置和文件名，默認(rèn)輸出位置為 ./dist ：

兩個(gè)屬性：

• path ：輸出的目錄絕對(duì)路徑；
• filename ：輸出的文件名稱(chēng)；

const path = require('path');
module.exports = {
  entry: './path/leo/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'leo-webpack.bundle.js'
  }
};

2.2 使用占位符來(lái)為每個(gè)文件命名，保證名稱(chēng)唯一

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }

2.3 使用CDN和資源hash

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}

如果編譯時(shí)不知道最終文件的 publicPath ，可以留空，并在入口文件中動(dòng)態(tài)設(shè)置?；蛘咴谌肟谄瘘c(diǎn)設(shè)置 __webpack_public_path__ 來(lái)忽略它。

__webpack_public_path__ = myRuntimePublicPath

3. loader

3.1 基礎(chǔ)概念

讓 webpack 能夠處理非 JS 文件，在 import 或 “加載”模塊時(shí)預(yù)處理文件。

通過(guò)配置 loader 兩個(gè)屬性來(lái)實(shí)現(xiàn)：

• test 屬性，用來(lái)標(biāo)識(shí)出應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的某個(gè)或多個(gè)文件；
• use 屬性，表示轉(zhuǎn)換時(shí)要用哪個(gè) loader；

const path = require('path');
const config = {
  output: {
    filename: 'leo-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
module.exports = config;

3.2 安裝并使用loader

如安裝一個(gè) css-loader 和 ts-loader 使得 webpack 可以加載 CSS 文件，或者將 TypeScript 轉(zhuǎn)換成 JavaScript：

npm install --save-dev css-loader ts-loader

使用：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

3.3 使用loader的三種方式

• 配置（推薦）：在 webpack.config.js 文件中指定 loader。

指定多個(gè)loader：

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

• 內(nèi)聯(lián)：在每個(gè) import 語(yǔ)句中顯式指定 loader。

可以在 import 語(yǔ)句或任何等效于 import 的方式中指定 loader，使用 ! 將多個(gè) loader 分開(kāi)，每個(gè)部分都是相對(duì)于當(dāng)前目錄的解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

盡可能使用 module.rules，減少代碼量，并且在出錯(cuò)時(shí)，更快地調(diào)試和定位 loader 中的問(wèn)題。

• CLI：在 shell 命令中指定它們。

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

3.4 loader加載順序

loader 會(huì)從數(shù)組最后一個(gè)開(kāi)始，往前一個(gè)一個(gè)加載：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ]
  }
};

3.5 loader 特性

• loader 支持鏈?zhǔn)絺鬟f。
• 能夠?qū)Y源使用流水線(xiàn)(pipeline)。一組鏈?zhǔn)降?loader 將按照相反的順序執(zhí)行。loader 鏈中的第一個(gè) loader 返回值給下一個(gè) loader。在最后一個(gè) loader，返回 webpack 所預(yù)期的 JavaScript。
• loader 可以是同步的，也可以是異步的。
• loader 運(yùn)行在 Node.js 中，并且能夠執(zhí)行任何可能的操作。
• loader 接收查詢(xún)參數(shù)。用于對(duì) loader 傳遞配置。
• loader 也能夠使用 options 對(duì)象進(jìn)行配置。
• 除了使用 package.json 常見(jiàn)的 main 屬性，還可以將普通的 npm 模塊導(dǎo)出為 loader，做法是在 package.json 里定義一個(gè) loader 字段。
• 插件(plugin)可以為 loader 帶來(lái)更多特性。
• loader 能夠產(chǎn)生額外的任意文件。

4. 插件

4.1 基礎(chǔ)概念

讓 webpack 能夠執(zhí)行更多任務(wù)，從優(yōu)化和壓縮，到重新定義環(huán)境中的變量，非常強(qiáng)大。

插件目的在于解決 loader 無(wú)法實(shí)現(xiàn)的其他事。

使用時(shí)，只需要 require 它，并添加到 plugins 數(shù)組，通過(guò) new 實(shí)例化即可:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過(guò) npm 安裝 const webpack = require('webpack'); // 用于訪(fǎng)問(wèn)內(nèi)置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]};

module.exports = config;

4.2 核心知識(shí)

原理剖析：

webpack 插件是一個(gè)具有 apply 屬性的 JavaScript 對(duì)象。apply 屬性會(huì)被 webpack compiler 調(diào)用，并且 compiler 對(duì)象可在整個(gè)編譯生命周期訪(fǎng)問(wèn)。

用法：

由于插件可以攜帶參數(shù)/選項(xiàng)，你必須在 webpack 配置中，向 plugins 屬性傳入 new 實(shí)例。

配置：

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通過(guò) npm 安裝
const webpack = require('webpack'); //訪(fǎng)問(wèn)內(nèi)置的插件
const path = require('path');

const config = {
  entry: './path/leo/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

5. 模式

通過(guò)配置 mode 參數(shù)，指定當(dāng)前的開(kāi)發(fā)模式，有 development 和 production 兩個(gè)值：

module.exports = {
  mode: 'production'
};

也可以通過(guò) CLI 參數(shù)傳遞：

webpack --mode=production

參數(shù)描述：

記住，只設(shè)置 NODE_ENV，則不會(huì)自動(dòng)設(shè)置 mode。

二. 配置

webpack 的配置文件，是導(dǎo)出一個(gè)對(duì)象的 JavaScript 文件，由 webpack 根據(jù)對(duì)象定義的屬性進(jìn)行解析。

因?yàn)?webpack 配置是標(biāo)準(zhǔn)的 Node.js CommonJS 模塊，你可以做到以下事情：

• 通過(guò) require(...) 導(dǎo)入其他文件;
• 通過(guò) require(...) 使用 npm 的工具函數(shù);
• 使用 JavaScript 控制流表達(dá)式，例如 ?: 操作符;
• 對(duì)常用值使用常量或變量;
• 編寫(xiě)并執(zhí)行函數(shù)來(lái)生成部分配置;

但應(yīng)避免以下做法：

• 在使用 webpack 命令行接口(CLI)（應(yīng)該編寫(xiě)自己的命令行接口(CLI)，或使用 --env）時(shí)，訪(fǎng)問(wèn)命令行接口(CLI)參數(shù);
• 導(dǎo)出不確定的值（調(diào)用 webpack 兩次應(yīng)該產(chǎn)生同樣的輸出文件）;
• 編寫(xiě)很長(zhǎng)的配置（應(yīng)該將配置拆分為多個(gè)文件）;

1. 基本配置

// webpack.config.js

var path = require('path');
module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

2. 多種配置

除了到處單個(gè)配置對(duì)象，我們也可以有一些其他方式：

2.1 導(dǎo)出為一個(gè)函數(shù)

我們可能需要同時(shí)考慮到開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境，在 webpack.config.js中實(shí)現(xiàn)，我們會(huì)有至少兩種方式：

• 導(dǎo)出一個(gè)配置對(duì)象來(lái)代替；
• 導(dǎo)出一個(gè)可以傳入?yún)?shù)的函數(shù)：

傳入兩個(gè)參數(shù)：環(huán)境變量（查看 CLI 文檔的環(huán)境選項(xiàng)）和 map 對(duì)象（argv）參數(shù)。

module.exports = function(env, argv) {
  return {
    mode: env.production ? 'production' : 'development',
    devtool: env.production ? 'source-maps' : 'eval',
    plugins: [
      new webpack.optimize.UglifyJsPlugin({
        compress: argv['optimize-minimize'] // 只有傳入 -p 或 --optimize-minimize
       })
     ]
  };
};

2.2 導(dǎo)出為一個(gè) Promise

webpack 將運(yùn)行由配置文件導(dǎo)出的函數(shù)，并且等待 Promise 返回。便于需要異步地加載所需的配置變量。

module.exports = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: './app.js',
        /* ... */
      })
    }, 5000)
  })
}

2.3 導(dǎo)出多個(gè)配置對(duì)象

我們把導(dǎo)出對(duì)象設(shè)置成一個(gè)數(shù)組，webpack 運(yùn)行時(shí)，會(huì)將所有配置對(duì)象都構(gòu)建，這對(duì)于針對(duì)多個(gè)構(gòu)建目標(biāo)（例如 AMD 和 CommonJS）打包一個(gè) library非常有用。

module.exports = [{
  output: {
    filename: './dist-amd.js',
    libraryTarget: 'amd'
  },
  entry: './app.js',
  mode: 'production',
}, {
  output: {
    filename: './dist-commonjs.js',
    libraryTarget: 'commonjs'
  },
  entry: './app.js',
  mode: 'production',
}]

3. 使用其他配置語(yǔ)言

webpack 接受以多種編程和數(shù)據(jù)語(yǔ)言編寫(xiě)的配置文件。支持的文件擴(kuò)展名列表，可以在 node-interpret 包中找到。使用 node-interpret，webpack 可以處理許多不同類(lèi)型的配置文件。

文檔介紹：《使用不同語(yǔ)言進(jìn)行配置(configuration languages)》

3.1 TypeScript

為了用 TypeScript 書(shū)寫(xiě) webpack 的配置文件，必須先安裝相關(guān)依賴(lài)：

npm install --save-dev typescript ts-node @types/node @types/webpack

使用 TypeScript 書(shū)寫(xiě) webpack 的配置文件：

// webpack.config.ts

import path from 'path';
import webpack from 'webpack';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};
export default config;

3.2 Babel and JSX

在以下的例子中，使用了 JSX（React 形式的 javascript）以及 Babel 來(lái)創(chuàng)建 JSON 形式的 webpack 配置文件：

首先安裝依賴(lài)：

npm install --save-dev babel-register jsxobj babel-preset-es2015

設(shè)置配置：

// .babelrc

{
  "presets": [ "es2015" ]
}
// webpack.config.babel.js

import jsxobj from 'jsxobj';

// example of an imported plugin
const CustomPlugin = config => ({
  ...config,
  name: 'custom-plugin'
});

export default (



);

三. 模塊

1. 模塊介紹

開(kāi)發(fā)中將程序分解成離散功能塊，成為模塊。

而 webpack 模塊能夠以各種形式表達(dá)他們的依賴(lài)關(guān)系：

• es6： import語(yǔ)句；
• CommonJS: require() 語(yǔ)句；
• AMD： define 和 require 語(yǔ)句；
• css/sass/less 文件中的 @import 語(yǔ)句；
• 樣式(url(...))或 HTML 文件中的圖片鏈接(image url)；

查看更多 模塊方法。

2. 模塊解析

使用 resolver 庫(kù)來(lái)找到模塊的絕對(duì)路徑，幫助 webpack 找到 bundle 中需要引入的模塊代碼，這些代碼包含在每個(gè) require / import 語(yǔ)句中，在模塊打包中，webpack 使用 enhanced-resolve 來(lái)解析文件路徑

webpack 解析規(guī)則： 使用 enhanced-resolve，webpack 支持解析三種文件路徑：

• 絕對(duì)路徑：

import "/home/me/file";

import "C:\\Users\\me\\file";

• 相對(duì)路徑：

import "../src/file1";
import "./file2";

• 模塊路徑：

import "module";
import "module/lib/file";

模塊將在 resolve.modules 中指定的所有目錄中搜索，另外可以使用 resolve.alias 做初始化模塊路徑。

解析器（resolver）檢查路徑是否指向文件或目錄，如果是指向文件：

• 如果有文件拓展名則直接打包；
• 否則使用 [resolve.extensions] 選項(xiàng)作為文件擴(kuò)展名來(lái)解析，配置解析器在解析中能夠接受哪些擴(kuò)展名（例如 .js, .jsx）。

如果是指向文件夾，則按照步驟找到正確拓展名的文件：

• 如果文件夾中包含 package.json 文件，則按照順序查找 resolve.mainFields 配置選項(xiàng)中指定的字段。并且 package.json 中的第一個(gè)這樣的字段確定文件路徑。
• 如果不存在 package.json 文件或者 package.json 文件中的 main 字段沒(méi)有返回一個(gè)有效路徑，則按照順序查找 resolve.mainFiles 配置選項(xiàng)中指定的文件名，看是否能在 import/require 目錄下匹配到一個(gè)存在的文件名。
• 文件擴(kuò)展名通過(guò) resolve.extensions 選項(xiàng)采用類(lèi)似的方法進(jìn)行解析。

3. 解析 loader

Loader 解析遵循與文件解析器指定的規(guī)則相同的規(guī)則。但是 resolveLoader 配置選項(xiàng)可以用來(lái)為 Loader 提供獨(dú)立的解析規(guī)則。

4. 緩存

每個(gè)文件系統(tǒng)訪(fǎng)問(wèn)都被緩存，以便更快觸發(fā)對(duì)同一文件的多個(gè)并行或串行請(qǐng)求。在觀察模式下，只有修改過(guò)的文件會(huì)從緩存中摘出。如果關(guān)閉觀察模式，在每次編譯前清理緩存。

有關(guān)上述配置的更多信息，請(qǐng)查看解析 API學(xué)習(xí)。

四. 構(gòu)建目標(biāo)

注意：webpack 的 target 屬性不要和output.libraryTarget屬性混淆。

1. 用法

在你的 webpack 配置中設(shè)置 target 的值:

module.exports = {
  target: 'node'
};

在上面例子中，使用 node webpack 會(huì)編譯為用于「類(lèi) Node.js」環(huán)境（使用 Node.js 的 require ，而不是使用任意內(nèi)置模塊（如 fs 或 path）來(lái)加載 chunk）。

更多詳細(xì)的值，可以參考 構(gòu)建目標(biāo)(targets)

2. 多個(gè) target

盡管 webpack 不支持向 target 傳入多個(gè)字符串，你可以通過(guò)打包兩份分離的配置來(lái)創(chuàng)建同構(gòu)的庫(kù)：

var path = require('path');
var serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

var clientConfig = {
  target: 'web', // <=== 默認(rèn)是 'web'，可省略
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];

到此這篇關(guān)于Webpack核心概念的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論