從零配置webpack 4+react腳手架（四）

前言

可前往個人Github/blog進行閱讀，如有幫助，賞個star😊

通過前三節的學習，咱們已經大概能本身配出一個react腳手架了，可是仍有許多配置未完成，好比圖片，字體圖標的配置，Source Map的配置等，經過前面的學習，我相信你已經可以作到這些簡單的配置了，實在還不是很清楚，那咱們就往下看吧！

添加圖片的loader

file-loader 能夠對圖片文件進行打包，可是 url-loader 能夠實現 file-loader 的全部功能，且能在圖片大小限制範圍內打包成base64圖片插入到js文件中，這樣作的好處是什麼呢？先一步一步走着！

安裝url-loader

這裏須要注意，url-loader依賴於file-loader，全部咱們兩個loder都要安裝

npm install file-loader url-loader --save-dev
複製代碼

引入url-loader

在 webpack.common.config.js 中的rules中添加一個新的對象，並輸入如下代碼：

module: {
  rules: [
    //...
    {
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 8192,
        },
      }
    }
  ]
}
複製代碼

• 遇到以jpg,png,gif爲後綴的文件，使用url-loader進行預處理；
• options中的[name].[ext]表示，輸出的文件名爲 原來的文件名.後綴 ；
• outputPath是輸出到dist目錄下的路徑，即dist/images/...  ；
• limit表示，若是你這個圖片文件大於8192b，即8kb，那我url-loader就不用，轉而去使用file-loader，把圖片正常打包成一個單獨的圖片文件到設置的目錄下，如果小於了8kb，那好，我就將圖片打包成base64的圖片格式插入到bundle.js文件中，這樣作的好處是，減小了http請求，可是若是文件過大，js文件也會過大，得不償失，這是爲何有limit的緣由！

接下來就是測試下能夠不能夠用了，在 src 目錄下新建一個文件夾： images ，並導入一個圖片文件，名爲 background.png ，圖片文件點我下載。

而後在 app.js 中寫以下代碼：

import React from 'react';
import './app.less';
import background from './images/background.png';

function App() {
  return (
    <div className="app"> <h1 className="text">Hello Webpack</h1> <img className="background" src={background} alt=""/> </div> ); } export default App; 複製代碼

在 app.less 中寫以下代碼：

.app {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  .text {
    font-size: 20px;
    color: lightseagreen;
  }
  .background {
    position: absolute;
    width: 100%;
    left: 0;
    top: -124px;
    z-index: -1;
  }
}
複製代碼

執行 npm run build ，你去dist目錄下看看是否是多了一個images/background.png，這是由於咱們的文件有300多kb，遠遠超出了咱們設定的8kb，若是你在limit設置爲：819200，你再從新編譯一次，你會發現這個圖片文件沒有被打包出來，由於它以base64格式圖片導入到了bundle.js中。

你能夠看看index.html是啥樣子的！～～

添加字體圖標loader

字體圖標須要咱們以前已經安裝過的 file-loader ,配置很是簡單，可是具體操做仍是得給你講明白一點

安裝file-loader

若是你不肯定本身是否安裝，在package.json中看看有沒有依賴項

引入file-loader

在 webpack.common.config.js 中添加如下代碼：

module: {
    rules: [
      //...
      {
        test: /\.(eot|ttf|svg|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'font/'
          }
        }
      }
    ]
  }
複製代碼

將iconfon圖標導入項目

咱們先在 src 目錄下新建一個文件夾： font 。 而後咱們去iconfont官網找幾個圖標，（若沒有註冊，先註冊再添加至新項目）好比我添加了一個 愛心 圖標至個人webpack-demo項目，點擊下載至本地：

找到該文件夾，把 eot\svg\ttf\woff\woff2 爲後綴的文件所有剪切進咱們新建的 font 文件夾中，把 iconfont.css 文件中的代碼複製到咱們的 app.less 中，但由於咱們的幾個字體文件放到了font文件夾，咱們須要更改url：

@font-face {font-family: "iconfont";
  src: url('./font/iconfont.eot?t=1571041571943'); /* IE9 */
  src: url('./font/iconfont.eot?t=1571041571943#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABnQAAAJ6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp8gREBNgIkAwgLBgAEIAWEbQcyG7kFyJ6aPIEICihKRGQ5DgwQD//t9799ZubdP980uSRtnk1XN2B1CJEEsVGaheKZ/P5vrf3FtfHmPeqdN9STytzuzIrPDe7JpBEKIRGKNdNGIpKpWPGkkqoy4HL8XwEFMg8ot7U2/aImBRhYGuhYgyIrk9Qbxi54gccJdJnkIZw0tHVCksIeF4h3qowhqZBUFFapQtOwtLUpfBavpo/pFsCn6PvxD0JRSVqZzTp/qpeg6ue5MyIvthcN5hVLy/nBVpGxDhTiurF4KlYwYayuYpxZcCx68PO8/R+4xVH/PNGwqT1gHCqfSeWpH5WaQEl654C9SVeShrJnCh57/Hb/PLnaKZWf3mwfCRdfG4Ktlo5THx5ePGjOhWEZp8W/G9KHwMwXLClCjqgd7WX1FB3skhz7Rz3ryKmpyQp/ov+sVgvdPUJ14pkqgPZC+csrBAQfHgfeRzLL/mpqAT+uK6bqYWFQdx4KflJNMwhA+c81djEVdFADydyksQldutAGFB3yOdU6ekfVUI3eV7jDRIasmieKYB0t3bbQqPbRZU3j6m7DmFhROrFqDSAMuETS5wuyAXdEEXygZcwvGgOR0eU2crfsthivKbWMYE4kFJlCqmhb1PXwlJjeTuQxA7O8JhJ1ExZVMyjoC5QrjcQibIkZ0XE5xDlFlNkmagCnEcOwkcNsjYjcp3DulPj9tOlNPtE2IcUxhsA4QoJETEFUIpuFBt25lMrn2xGyMQaMdTTV5bsRTJTaPxLkExhANBqtQU2P8krUOFkIx1EIxdhMSAMYRBgMNsRpHqQhRJyPMiHvKOF3OtGhRt/2ZvMHKlgbti2Fw8nqe9XCqu8AAAAAAA==') format('woff2'),
  url('./font/iconfont.woff?t=1571041571943') format('woff'),
  url('./font/iconfont.ttf?t=1571041571943') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./font/iconfont.svg?t=1571041571943#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-xinaixin:before {
  content: "\e69b";
}


.app {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  .text {
    font-size: 20px;
    color: lightseagreen;
  }
  .background {
    position: absolute;
    width: 100%;
    left: 0;
    top: -124px;
    z-index: -1;
  }
}
複製代碼

而後在 app.js 中使用：

import React from 'react';
import './app.less';
import background from './images/background.png';

function App() {
  return (
    <div className="app"> <h1 className="text">Hello Webpack<i className="iconfont">&#xe69b;</i></h1> <img className="background" src={background} alt=""/> </div> ); } export default App; 複製代碼

這時候你再打包，回到頁面看看是否是咱們的圖標正確顯示了。 個人html文件內容以下：

配置source-map

source-map是幹嗎用的？咱們先來修改如下 app.js 中的代碼，故意給它製造一個錯誤：

import React from 'react';
import './app.less';
import background from './images/background.png';

function App() {
  return (
    <div className="app"> <h1 className="text">Hello Webpack<i className="iconfont">&#xe69b;</i></h1> <img className="background" src={background} alt=""/> { consele.log("I cannot print to console!") } </div> ); } export default App; 複製代碼

咱們增長了一個控制檯打印輸出語句，若是正常的話咱們會在控制檯中看到打印輸出：I cannot print to console! 可是咱們把console.log故意製造了語法錯誤，寫成consele.log。這個時候咱們去控制檯查看：

它的錯誤提示是咱們的打包文件bundle.js，這是打包以後的文件，咱們想知道的是咱們源碼文件的錯誤地方，否則你還要經過查看打包文件的錯誤，回溯到咱們源碼的錯誤地方，特別麻煩，那有沒有一個方法能讓咱們控制檯直接提示的是源碼錯誤出處呢？答案就是 source-map

它的配置很是簡單，只須要在 webpack.common.config.js 中增長一個 devtool 屬性便可！

module.exports = {
  devtool: 'cheap-module-eval-source-map',
	//...
}
複製代碼

這裏爲何是 cheap-module-eval-source-map ，你可查閱這個文檔：devtool

而後咱們再打包一次，此次去控制檯看看，它的錯誤提示是否是咱們源碼位置了：

ps：右邊的錯誤提示不是再app.js是由於咱們定義了兩個入口文件，可能會有相互依賴的關係，這裏我也不是很清楚，知道的同窗能夠交流下。

這一節結束，咱們這系列文章就算是結束了，其實還有不少能夠優化的手段，好比創建單獨的配置文件，讓咱們不用手動去找webpack配置進行修改啦；好比懶加載（lazy-loading）啦。。。這些你們有興趣可需求可自行了解，這個系列文章主要和你們一塊兒進行一些簡單的配置，快速上手。

結語：花了大概四天完成這個系列的文章，做爲本身的一個記錄，也但願能幫到像我同樣的新手，webpack的學習還任重道遠，與你們共勉！