Webpack的基本配置和打包與介紹（二）

快跑啊小盧發表於2021-04-15
Web

1. 前言

  • 在上一章中我們學習到了webpack的基本安裝配置和打包，我們這一章來學學如何使用loader和plugins
  • 如果沒看第一章的這裡有傳送門

2. Loader

2.1 什麼是loader

  • 用官網的話說就是webpack只能理解JavaScript和JSON檔案，這是webpack開箱可用的自帶能力。而面對一些不是js的檔案比如樣式檔案（css，less，scss），檔案（jpg／png）等webpack要怎樣去理解呢？
  • loader讓webpack能夠去處理其他型別的檔案，並將它們轉換為有效模組，以供應用程式使用，以及被新增到依賴圖中。

2.2 loader簡單用法

  • 話不多說直接上例子
  • 基於之前的例子在src資料夾中新增一個style.css檔案
/* style.css */
*{
    font-size: 50px;
    color: yellowgreen;
}
  • 修改一下foo.js檔案引入css檔案
//foo.js
import hello from './helloWebpack'
import './style.css'
hello()
document.write('hi loader')
  • 執行一下打包build命令

咦？？為什麼用不了呢？我們閱讀報錯可以發現You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

翻譯過來的意思大概是需要一個合適的loader來處理這個檔案。上面說到webpack是認識js的但是他不認識css呀，所以現在就需要loader出馬來轉換它了。

  • 在目錄下執行,安裝處理css檔案需要的兩個loader，在終端安裝如下
npm install style-loader css-loader --save-dev
  • package.json就會多出兩項
  • 此時我們在webpack.config.js中修改配置，讓webpack知道哪些檔案是需要轉換的，哪些檔案通過loader來進行處理
const path = require('path');
module.exports = {
  entry: {
    index: './src/foo.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js',
  },
  mode: 'production',
  // 配置rules是展示 loader 的一種簡明方式
  module: {
    rules: [
      { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ]}
    ]
  }
}
  • 看到rules中 test代表傳入一個正規表示式，代表你要處理檔案型別，後面的use指的是前面檔案型別的檔案會被後面兩個loader所處理，在上面表示以.css為字尾的就會被後面use中的style-loader和css-loader所處理轉換。
  • 改好配置檔案後我們繼續嘗試打包一下npm run build
  • 打包沒有報錯 我們執行一下html

Nice！！！！成功執行

  • 此時的目錄結構為

這裡要注意的是兩個loader的順序不能寫反，按照官網的說法loader從右到左（或從下到上）地取值(evaluate)/執行(execute)。在上面面的示例中，從 css-loader 開始執行，最後以 style-loader為結束

  • 這裡簡單的介紹了兩個loader，但還有很多很多的loader 感興趣的可以在官網看到 傳送門

2.3 loader總結

  • 總的來說我們想通過webpack來打包一個專案，但是webpack最後打包出來的成果是一份Javascript程式碼，實際上在webpack的內部他也是隻認識Javascript和json檔案。所以我們要告訴 webpack 載入 CSS 檔案，或者將 TypeScript 轉為 JavaScript，還有各種各樣的檔案轉化為 JavaScript，這時候我們就需要用到 loader
  • 因此當專案存在非Javascript型別檔案時，我們需要先對其進行必要的轉換，才能繼續執行打包任務，這也是loader機制存在的意義

3. Plugin

3.1 什麼是plugin

  • 在我看來顧名思義plugin翻譯過來就是外掛，對於外掛相信大家都有所瞭解，外掛就是為了擴充某些功能來方便我們的操作或者說給我們的操作提供一些優化
  • 而webpack裡面的plugin也是這樣的，如果說loader幫助webpack認識檔案從而轉換，那麼plugin便是開放webpack執行時的各種時機，方便開發者來起到一個功能擴充套件的功能。loader和plugin作為webpack的兩個重要組成部分，承擔著兩部分不同的職責。
  • 用官網的話說就是plugin目的在於解決loader無法實現的其他事

這裡只簡述了plugin的功能 具體的原始碼和解析可以在這裡看到 官網傳送門

3.2 plugin的簡單用法

  • 在之前的例子中我們的index.html是我們自己手動建立的，而在我們vue腳手架打包的時候會自己生成一個index.html 所以我們是不是也可以通過配置來獲得這個便利呢？
  • 答案是可以的，使用HtmlWebpackPlugin外掛，打包的時候就可以自動生成
  • 在終端輸入命令安裝外掛
npm install --save-dev html-webpack-plugin
  • 在package.json中可以看到多了個這項
  • 我們在webpack.config.js中修改配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    index: './src/foo.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js',
  },
  mode: 'production',
  // 配置rules是展示 loader 的一種簡明方式
  module: {
    rules: [
      { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ]}
    ]
  },
  plugins: [
    new HtmlWebpackPlugin()//配置自動生成html的外掛
  ],
}
  • 刪除之前在dist建立的index.html
  • 改好配置檔案後我們繼續打包一下npm run build
  • 此時我們會發現在dist目錄下自動生成了index.html，執行一下

3.3 plugin總結

  • plugin的用法有很多，由於外掛可以攜帶引數/選項，你必須在webpack配置中，向plugins屬性傳入一個new例項，取決於你的webpack用法對應有多種使用外掛的方式。
  • 更詳細的開發文件可以檢視官網的傳送門。

4. 總結

  • 以上就是loader和plugin的最最基本的使用，也是我在學習的時候參考各路大神總結的。
  • 用轉轉的一句話說就是因為plugin和loader是對外開放的設計，所以保證了webpack擁有持續的靈活性。

相關文章