Webpack4 学习笔记五 图片解析、输出的文件划分目录

前言

此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出

webpack打包图片和划分文件路径

使用图片的方式

• 通过 new Image()
• 在 css中设置 background-image
• 在 html中使用img标签引用图片

需要一个合适的 loader,对图片进行处理

file-loader: 指示 webpack将所需对象作为文件发出并返回其公共URL
url-loader: 以base64编码的URL加载文件,减少http请求。

cnpm i file-loader url-loader --save-dev

weebpack配置:

  module.exports = {
    ...
    module: {
      rules: [
        {
          test: /.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 10000,   // 小于 8kb的图片转换为base64编码,减少http请求
            }
          }
        }
      ]
    }
  }

划分文件路径

输出后的资源如 css文件，图片文件想要给他们划分文件夹。 如css的文件都方法 css的文件夹下, 图片都放在 images文件夹下

基上面代码,webpack配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    ...
    module: {
      rules: [
        {
          test: /.css$/,
          use: [ MiniCssExtractPlugin.loader, 'css-loader']
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 10000,   // 小于 8kb的图片转换为base64编码,减少http请求
              outputPath: '/images'
            }
          }
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: '/css/[name].css'
      })
    ]
  }

css、html等文件的引用路径会自动改变。

笔记地址