从零配置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的学习还任重道远，与你们共勉！