webpack學習筆記（2）-webpack核心概念

在項目下建立一個webpack.config.js(默認，可修改)文件來配置webpack

module.exports = {
    entry: '',               // 入口文件
    output: {},              // 出口文件
    module: {},              // 處理對應模塊
    plugins: [],             // 對應的插件
    devServer: {},           // 開發服務器配置
    mode: 'development'      // 模式配置
}

以上就是webpack的正常配置模塊

entry

工程資源的入口，它能夠是單個文件也能夠是多個文件。

Entry 類型

• string（單個文件入口）

module.exports = {
    entry: './app.js'
}

• array（多個文件入口）

module.exports = {
    entry: ['./app.js','./index.js']
}

• object（多個文件入口）

module.exports = {
    entry: {index,'./index.js',app,'./app.js'} //index表示獨特的chunk
}

context

Webpack 在尋找相對路徑的文件時會以 context 爲根目錄，context 默認爲執行啓動 Webpack 時所在的當前工做目錄。 若是想改變 context 的默認配置，則能夠在配置文件裏這樣設置它：

module.exports = {
  context: path.resolve(__dirname, 'app')
}

Chunk 名稱

Webpack 會爲每一個生成的 Chunk 取一個名稱，Chunk 的名稱和 Entry 的配置有關：

• 若是 entry 是一個 string 或 array，就只會生成一個 Chunk，這時 Chunk 的名稱是 main；
• 若是 entry 是一個 object，就可能會出現多個 Chunk，這時 Chunk 的名稱是 object 鍵值對裏鍵的名稱。

動態 Entry

假如項目裏有多個頁面須要爲每一個頁面的入口配置一個 Entry ，但這些頁面的數量可能會不斷增加，則這時 Entry 的配置會受到到其餘因素的影響致使不能寫成靜態的值。其解決方法是把 Entry 設置成一個函數去動態返回上面所說的配置，代碼以下：

// 同步函數
entry: () => {
  return {
    a:'./pages/a',
    b:'./pages/b',
  }
};
// 異步函數
entry: () => {
  return new Promise((resolve)=>{
    resolve({
       a:'./pages/a',
       b:'./pages/b',
    });
  });
};

output

這是一個配置對象，經過它咱們能夠對最終打包的產物進行配置。

filename

output.filename 配置輸出文件的名稱，爲string 類型。

• 單個文件的輸出

const path = require('path');

module.exports = {
    entry: './app.js',
    output: {
        path: path.join(__dirname, 'dist'), //打包資源放置的路徑，必須爲絕對路徑。
        filename: 'bundle.js' //打包結果的文件名。
    }
}

• 多個文件的輸出

const path = require('path');

module.exports = {
    entry: {index,'./index.js',app,'./app.js'},
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].min.[hash:5].js'
    }
}

chunkFilename

output.chunkFilename 配置無入口的 Chunk 在輸出時的文件名稱。 chunkFilename 和上面的 filename 很是相似，但 chunkFilename 只用於指定在運行過程當中生成的 Chunk 在輸出時的文件名稱。 常見的會在運行時生成 Chunk 場景有在使用 CommonChunkPlugin、使用 import('path/to/module') 動態加載等時。 chunkFilename 支持和 filename 一致的內置變量。

path

output.path 配置輸出文件存放在本地的目錄，必須是 string 類型的絕對路徑。一般經過 Node.js 的 path 模塊去獲取絕對路徑：

path: path.resolve(__dirname, 'dist_[hash]')

publicPath

output.publicPath 配置發佈到線上資源的 URL 前綴，爲string 類型。 默認值是空字符串 ''，即便用相對路徑。
須要把構建出的資源文件上傳到 CDN 服務上，以利於加快頁面的打開速度。配置代碼以下：

filename:'[name]_[chunkhash:8].js'
publicPath: 'https://cdn.example.com/assets/'

這時發佈到線上的 HTML 在引入 JavaScript 文件時就須要：

<script src='https://cdn.example.com/assets/a_12345678.js'></script>

使用該配置項時要當心，稍有不慎將致使資源加載404錯誤。

module

module 配置如何處理模塊。

配置Loaders

處理文件，Webpack 自己只能處理 JavaScript，而對於別的類型的語法則徹底不認識。若是咱們須要引入某一類型的模塊，那麼就須要經過爲它添加特性類型的 loader。

rules 配置模塊的讀取和解析規則，一般用來配置 Loader。其類型是一個數組，數組裏每一項都描述瞭如何去處理部分文件。

1. 條件匹配:經過 test 、 include 、 exclude 三個配置項來命中 Loader 要應用規則的文件。
2. 應用規則:對選中後的文件經過 use 配置項來應用 Loader，能夠只應用一個 Loader 或者按照從後往前的順序應用一組 Loader，同時還能夠分別給 Loader 傳入參數。
3. 重置順序:一組 Loader 的執行順序默認是從右到左執行，經過 enforce 選項可讓其中一個 Loader 的執行順序放到最前或者最後。

module: {
  rules: [
    {
      // 命中 JavaScript 文件
      test: /\.js$/,
      // 用 babel-loader 轉換 JavaScript 文件
      // ?cacheDirectory 表示傳給 babel-loader 的參數，用於緩存 babel 編譯結果加快從新編譯速度
      use: ['babel-loader?cacheDirectory'],
      // 只命中src目錄裏的js文件，加快 Webpack 搜索速度
      include: path.resolve(__dirname, 'src')
    },
    {
      // 命中 SCSS 文件
      test: /\.scss$/,
      // 使用一組 Loader 去處理 SCSS 文件。
      // 處理順序爲從後到前，即先交給 sass-loader 處理，再把結果交給 css-loader 最後再給 style-loader。
      use: ['style-loader', 'css-loader', 'sass-loader'],
      // 排除 node_modules 目錄下的文件
      exclude: path.resolve(__dirname, 'node_modules'),
    },
    {
      // 對非文本文件採用 file-loader 加載
      test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
      use: ['file-loader'],
    },
  ]
}

在 Loader 須要傳入不少參數時，你還能夠經過一個 Object 來描述，例如在上面的 babel-loader 配置中有以下代碼：

use: [
  {
    loader:'babel-loader',
    options:{
      cacheDirectory:true,
    },
    // enforce:'post' 的含義是把該 Loader 的執行順序放到最後
    // enforce 的值還能夠是 pre，表明把 Loader 的執行順序放到最前面
    enforce:'post'
  },
  // 省略其它 Loader
]

上面的例子中 test include exclude 這三個命中文件的配置項只傳入了一個字符串或正則，其實它們還都支持數組類型，使用以下：

{
  test:[
    /\.jsx?$/,
    /\.tsx?$/
  ],
  //只選中當前目錄
  include:[
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'tests'),
  ],
  //排除相應目錄文件
  exclude:[
    path.resolve(__dirname, 'node_modules'),
    path.resolve(__dirname, 'bower_modules'),
  ]
}

經常使用 Loader

• 編譯相關：babel-loader、ts-loader
• 樣式相關：style-loader、css-loader、less-loader、postcss-loader
• 文件相關：file-loader、url-loader

plugins

Plugin 用於擴展 Webpack 功能，各類各樣的 Plugin 幾乎讓 Webpack 能夠作任何構建相關的事情。

• 參與打包整個過程
• 打包優化和壓縮
• 配置編譯時的變量
• 極其靈活

Plugin 的配置很簡單，plugins 配置項接受一個數組，數組裏每一項都是一個要使用的 Plugin 的實例，Plugin 須要的參數經過構造函數傳入。

const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

module.exports = {
  plugins: [
    // 全部頁面都會用到的公共代碼提取到 common 代碼塊中
    new CommonsChunkPlugin({
      name: 'common',
      chunks: ['a', 'b']
    }),
  ]
};

經常使用 Plugins

• 優化相關
  CommonsChunkPlugin
  UglifyjsWebpackPlugin
• 功能相關
  ExtractTextWebpackPlugin
  HtmlWebpackPlugin
  HotModuleReplacementPlugin
  CopyWebpackPlugin

其餘名詞

Chunk

至關於代碼塊

Bundle

打包後的一捆代碼

Module

模塊