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

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擁有持續的靈活性。