12.使用webpack管理项目中的静态资源

静态资源：图片，富媒体，字体文件等

图片引入方式

1.html 中通过 标签等方式引入
2.css 中 通过 src等方式引入
3.javascript 中使用图片的URL或者内容 （比如 canvas）

使用 loader 来加载图片资源

file-loader url-loader

• file-loader 能够根据配置项复制使用到的资源（不局限于图片）到构建之后的文件夹，并且能够更改对应的链接
• url-loader 包含 file-loader 的全部功能，并且能够根据配置将符合配置的文件转换成base64方式引入，将小体积的图片base64引入项目可以减少 http 请求，也是一个前端常用的优化方式

url-loader 的 limit 选项来控制不超过一定限制的图片才使用base64

{
  test: /\.(png|svg|jpg|gif)$/,
  use: {
    loader: "url-loader",
    options: {
      limit: 3 * 1024, //3k
    },
  },
},

配置 cdn 域名

一般静态资源上线的时候都会放到CDN，假设我们的CDN域名和路径为 http://xxx.xxx.com/img/
只需要修改 output.publicPath

module.exports = {
    output:{
      publicPath:'http://xxx.xxx.com/img/'
  }
}

html和css中使用 alias

url-loader 会处理使用别名引入的方式

module.exports = {
    resolve:{
      alias:{
        '@assets':path.resolve(__dirname,'./src/assets')
    }
  }
}

需要注意，在html和css使用alias 必须要前面添加 ~ **

tips: html中使用 引入图片等静态资源的时候，需要添加 html-loader 配置。不然也不会处理静态资源路径的问题

图片优化

image-webpack-loader

这个loader不能将图片嵌入应用，所以必须和 url-loader 以及 svg-url-loader 一起使用

css Sprite 雪碧图

安装

npm i postcss-loader postcss-sprites -D

修改 postcss 的 postcss.config.js , 增加插件的调用

//postcss.config.js
const postcssSprites = require('postccss-sprites')
module.exports = {
    plugins:[
      postcssScrites({
        spritePath:'./src/assets/img'
    })
  ]
}

修改 webpack.config.js 在 css-loader 之前配置上 postcss-loader (注意loader加载顺序，从后往前)

//webpack.config.js
//rules
{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
    },
  ],
}

其他资源处理

面试题

1.webpack 怎么给静态资源加上 CDN域名
2.url-loader 和 file-loader 有什么区别