webpack的配置项依赖

对下述代码的配置

  1. {
  2.   "name": "01.test",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "build": "webpack",
  8.     "dev": "webpack-dev-server"
  9.   },
  10.   "keywords": [],
  11.   "author": "",
  12.   "license": "ISC",
  13.   "devDependencies": {
  14.     "autoprefixer": "^7.0.0",
  15.     "clean-webpack-plugin": "^3.0.0",
  16.     "css-loader": "^5.2.7",
  17.     "file-loader": "^6.2.0",
  18.     "html-webpack-plugin": "^4.5.2",
  19.     "node-sass": "^5.0.0",
  20.     "postcss-loader": "^4.3.0",
  21.     "sass-loader": "^10.3.0",
  22.     "style-loader": "^2.0.0",
  23.     "url-loader": "^3.0.0",
  24.     "webpack": "^4.46.0",
  25.     "webpack-cli": "^3.3.12",
  26.     "webpack-dev-server": "^3.11.3"
  27.   }
  28. }
  1. const { resolve } = require('path');
  2. const autoprefixer = require('autoprefixer')
  4. module.exports = {
  5.     mode: 'development',
  6.     entry: './main.js',
  7.     output: {
  8.         filename: 'boundle.js',
  9.         path: resolve(__dirname, 'dist'),
  10.     },
  11.     module: {
  12.         rules: [
  13.             {
  14.                 test: /\.css$/,
  15.                 loader: [
  16.                     'style-loader',
  17.                     'css-loader',
  18.                     {
  19.                         loader: 'postcss-loader',
  20.                         options: {
  21.                             postcssOptions: {
  22.                                 plugins: [ autoprefixer],
  23.                             },
  24.                         },
  25.                     },
  26.                 ],
  27.             },
  28.             {
  29.                 // 处理图片
  30.                 test: /\.(png|jpg|gif)$/i,
  31.                 use: [
  32.                     {
  33.                         loader: 'url-loader',
  34.                         options: {
  35.                             name: '[name].[ext]',
  36.                             outputPath: 'imgs/',
  37.                             limit: 8192,
  38.                         },
  39.                     },
  40.                 ],
  41.             },
  42.             {
  43.                 test: /\.scss$/,
  44.                 loader: [
  45.                     'style-loader',
  46.                     'css-loader',
  47.                     {
  48.                         loader: 'postcss-loader',
  49.                         options: {
  50.                             postcssOptions: {
  51.                                 plugins: [autoprefixer],
  52.                             },
  53.                         },
  54.                     },
  55.                     'sass-loader',
  56.                 ],
  57.             },
  58.             // 处理字体图标文件
  59.             {
  60.                 test: /\.(eot|svg|ttf|woff)/,
  61.                 use: {
  62.                     loader: 'file-loader',
  63.                     options: {
  64.                         outputPath: 'fonts/'
  65.                     }
  66.                 }
  67.             }
  68.         ],
  69.     },
  70.     devtool: 'source-map',
  71.     plugins: [],
  72. };

一、对图片进行处理

（1）图片的处理file-loader

  1. import './js.img' .img 结尾的文件； file-loader 处理图片文件

image.png
image.png

  1. options对file-loader进行配置

**【name】**: 原先的图片名字；**【ext】**：原先扩展名
image.png

  1. outputPath：imgs/ 表示打包后将图片放入imgs文件夹下

image.png

（2）图片处理url-loader

  1. npm i url-loader -D: 处理之后，图片变为base64格式的编码：

image.png
image.png

（2.1）url-loader 和 file-loader 对比

npm i url-loader file-loader -D 二者结合使用
打包后文件对比： :::info url-loader:
图片 -> base64格式的字符串 -> 放入<img src="base64...">
缺点：
图片体积过大，base64体积变大、打包出的 js 文件体积变大，通过limit配置项进行配置，设置图片动态转换 ::: :::info file-loader
图片 -> 打包到一个文件夹中 -> 返回图片的路劲<img src="图片的路劲">
解析html 资源时，会发起http请求图片资源，性能降低 ::: http请求：
file -> 单独 .jpg 文件 -> 多发送一次http请求
url -> base64 -> 少发http请求

limit: 2048020kb 配置： 大于2048 表示打包成 文件形式；小于2048 打包成 base64 格式

  1. mode: development 生产模式；（默认开发模式）

    二、对css、less、scss进行处理配置

    2.1 对.css 文件处理

    loader: npm i style-loader css-loader -D;
    import './index.css' 处理.css结尾的文件
    image.pngimage.png
    css-loader： :::info
  1. 处理 在 .js 文件中 import 'index.css'

  2. 处理 .css 文件中引用另一个 .css 文件时的处理 ::: image.png
    style-loader: 将css 处理之后放入 <style></style>标签里
    image.png

    2.2 对scss文件处理

    npm i sass-loader@10.0.0 sass@1.3.0 -D
    将.scss代码 -> .css代码 -> style-loader -> 放入<style>
    image.png

    2.3 对css的兼容性配置：

    （1）. postscss-loader + autoprofixer

  3. npm i postscss-loader -D 处理css兼容新的问题 -> transfrom -> -webkit-transfrom;

image.png
image.png

  1. Autoprefixer 加上css厂商前缀 npm i autoprefixer -D

image.png
image.png

  1. 如果浏览器版本比较新，css支持好，就不需要加入前缀，

所以此时需要对兼容的浏览器版本进行配置
image.png

  1. 在package.json中对浏览器版本进行控制：
    1. {
    2.  "browserslist": [
    3.      "> 1%", // 表示市场份额大于1%的浏览器
    4.      "last 2 version"  // 上两个版本
    5.  ]
    6. }
    image.png
    image.png

    扩展：

    对loader配置：通过对象的形式 importLoaders处理scss中@import './other.scss'现在 不配置 也可以 .. 具体分析
    importLoaders: 表示： 在scss中引入另一个scss，在解析scss之前还要走前面两个loader..
    image.png
    image.png

三、打包字体文件

使用file-loader 处理 字体 文件
image.png