【Webpack】320- Webpack4 入门手册（共 18 章）（下）

介绍

1. 背景

最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设，目的在于：帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。

本文也是属于【EFT - 前端新手村】的一部分，用来帮助新人快速入门 Webpack4，内容偏基础，当然也可以作为复习材料~~这里分享给各位小伙伴啦！

2. 文章概要

由于本文篇幅较长，将分为《Webpack4入门手册（上）（共 18 章）》和《Webpack4入门手册（下）（共 18 章）》两篇文章发布，请联系起来看~

我将从最基础的【项目初始化】开始介绍，到【处理 CSS / JS / 图片】，到【热更新，打包优化】等等，一一介绍和实践。

文章共分为 18 章，关于最基础的四个核心概念，可以到我整理的另一篇文章 《Webpack4 的四个核心概念》 中学习。

《Webpack4 的四个核心概念》 https://github.com/pingan8787/Leo-JavaScript/blob/master/Cute-Webpack/guide/README.md

3. 教程目录

十、 webpack 图片 base64 和字体处理

1. 图片 base64 处理

url-loader 功能类似于 file-loader，可以将 url 地址对应的文件，打包成 base64 的 DataURL，提高访问效率。

安装插件：

npm install url-loader --save-dev

使用插件：

注意：这里需要将前面配置的 image-webpack-loader 先删除掉，在使用 url-loader。

// webpack.config.js	
module: {	
  {	
    test: /\.(png|svg|jpg|jpeg|gif)$/,	
    include: [path.resolve(__dirname, 'src/')],	
    use: [	
      {	
        loader: 'url-loader', // 根据图片大小，把图片转换成 base64	
          options: { limit: 10000 },	
      },	
      {	
        loader: "image-webpack-loader",	
        options: {	
          mozjpeg: { progressive: true, quality: 65 },	
          optipng: { enabled: false },	
          pngquant: { quality: '65-90', speed: 4 },	
          gifsicle: { interlaced: false },	
          webp: { quality: 75 }	
        }	
      },	
    ]	
  }]	
},

更多参数介绍，可访问中文官网的介绍:

2. 字体处理

字体处理的方式和图片处理方式是一样的，只是我们在配置 rules 时的 test 值不相同：

// webpack.config.js	
module: {	
  {	
    test: /\.(woff|woff2|eot|ttf|otf)$/,	
    include: [path.resolve(__dirname, 'src/')],	
    use: [ 'file-loader' ]	
  }	
},

十一、 webpack 配置合并和提取公共配置

在开发环境（development）和生产环境（production）配置文件有很多不同，但也有部分相同，为了不每次更换环境的时候都修改配置，我们就需要将配置文件做合并，和提取公共配置。

我们使用 webpack-merge 工具，将两份配置文件合并。

安装插件：

npm install webpack-merge --save-dev

然后调整目录结构，为了方便，我们将原来 webpack.config.js 文件修改名称为 webpack.commen.js，并复制两份相同的文件出来，分别修改文件名为 webpack.prod.js 和 webpack.dev.js 。

  ├─package.json	
  ├─dist	
  ├─src	
- ├─webpack.config.js	
+ ├─webpack.common.js  // webpack 公共配置文件	
+ ├─webpack.prod.js    // webpack 生产环境配置文件	
+ ├─webpack.dev.js     // webpack 开发环境配置文件

由于我们文件调整了，所以在 package.json 中，打包命令也需要调整，并且配置 mode 模式。

"scripts": {	
  "test": "echo \"Error: no test specified\" && exit 1",	
- "build": "npx webpack -c webpack.config.js",	
+ "build": "npx webpack -c webpack.dev.js --mode development",	
+ "dist": "npx webpack -c webpack.prod.js --mode production"	
},