webpack入門篇-理解入口、輸出、載入器和外掛

阿新 • • 發佈：2021-10-07

webpack是一個模組打包器（module bundler），它不同於Gulp，Gulp是一個任務執行器（task runner）。任務執行器可以自動化處理常見的開發任務，比如程式碼檢測、程式碼構建等等。webpack之所以流行，是因為它的功能太強大了，它不僅可以用來打包模組，它的外掛系統把任務執行器的工作也兼併了

下面主要介紹webpack中的四個核心概念：入口（entry）、輸出（output）、載入器（loader）和外掛（plugins）

入口

webpack會自動建立應用程式的依賴關係圖表，圖表的起點就是webpack的入口。webpack可以根據依賴關係圖知道要打包什麼，可以把入口起點認為是app的第一個啟動檔案

簡單寫法

entry: string | Array<string>

module.exports = {
  entry: './src/main.js'
}

module.exports = {
  entry: ['./src/main.js', './src/main2.js']
}

物件寫法

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

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

輸出

入口把所有要打包的資源歸攏到一起後，需要告訴webpack在哪裡輸出打包好的應用程式。輸出描述瞭如何處理歸攏在一起的程式碼(bundled code)

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

output.filename和output.path是兩個必選屬性，來告訴webpack bundle的名稱，以及想要生成(emit)到哪裡

如果是多入口檔案打包，在輸出的時候，filename不能為確定的名稱，可以是[id]、[name]、[chunkhash]、[hash]

module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),//出口路徑
    filename: '[name].js'//出口名稱
  }
}

output還用很多可選的配置屬性，平時用的並不多，這裡不多做介紹

載入器

webpack本身只能處理JavaScript模組，如果是其他型別的檔案，需要使用loader進行轉換。比如我們熟悉的.css的檔案，需要用css-loader和style-loader轉換後才能正常工作。loader本身其實是一個函式，接收原始檔作為引數，返回轉換後的結果。

module.exports = {
  entry: './entry.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  }
}

loader的讀取順序是從右至左，當匹配到css檔案時，先用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中。loader的新增需要配置到module物件的rules屬性中，rules屬性必須包含test和use

外掛

外掛可以完成loader不能完成的工作，比如程式碼壓縮、規則檢查等等。外掛其實相當於任務執行器，可以在程式碼打包過程中執行一些自定義功能

webpack本身內建了一些常用外掛，在使用的時候無需單獨引入。以BannerPlugin 這個內建外掛來實踐外掛的配置和執行，這個外掛的作用是給輸出的檔案頭部添加註釋資訊。

var webpack = require('webpack');
module.exports = {
  entry: './entry.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  plugins: [
    new webpack.BannerPlugin('Author info')
  ]
}

對於第三方外掛，使用時需要單獨引入，可以在社群裡找到很多強大的開源外掛

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  plugins: [
    new webpack.BannerPlugin('Author info'),
    new HtmlWebpackPlugin({
      title: 'Document title'
    })
  ]
}