webpack处理不同文件下的图片

前言：如果是外部的资源，是不需要考虑 webpack 的，只有本地的图片才需要被 webpack 处理。

一、使用file-loader处理CSS中的图片

1.安装 css-loader 和 mini-css-extract-plugin

npm install --save-dev css-loader@4.1.1
npm install --save-dev mini-css-extract-plugin@0.9.0

2.配置loader和plugin处理css文件

配置css-loader依赖和MiniCssExtractPlugin.loader依赖

     {//匹配css文件
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {//公共路径
              publicPath: '../'//因为minicss插件会将文件都放到css文件下，这样上传文件里的js在引用图片地址时，会以为图片都在css目录下，而实际图片上传地址由配置file-loader依赖决定。
            }
          },
          'css-loader'
        ]
      },

配置插件

  plugins: [//配置插件
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]

3. 安装file-loader依赖

npm install --save-dev file-loader@6.0.0

4. 配置file-loader依赖

配置完file-loader依赖，实现两件事，一件设置打包后图片存放的位置，第二件将webpack上传文件中css文件图片引用地址改成图片存在打包之后的地址。

    test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[ext]'//配置图片的路径img/logo.png
          }
        }

5. webpack 处理之后的效果

上传目录

html中引入了css文件

css中图片的地址也改成了相对了webpack处理后的目录地址

二、使用html-withimg-loader处理HTML中的图片

1.安装 html-withimg-loader依赖

npm install --save-dev html-withimg-loader@0.1.16

2. 配置html-withimg-loader依赖

   {
        test: /\.(htm|html)$/,
        loader: 'html-withimg-loader'
      }

3. 安装 file-loader依赖

• 安装file-loader依赖主要是处理html文件中的图片，需要结合file-loader来处理，添加配置项，处理打包后的html文件中引入图片的路径。

npm install --save-dev file-loader@6.0.0

4.配置file-loader

{
  test:/\.(jpg|png|gif)$/,
  use:{
	loader:'file-loader',
	options:{
		name:'img/[name].[ext]',
		esModule:false//添加该配置项，处理打包后html文件引入图片的路径
		}
	}
}

5.webpack处理之后的效果

打包目录

实现打包后的html正确引入图片

三、使用file-loader处理JS中的图片

1.安装file-loader依赖

2.配置file-loader依赖，并设置打包后图片存放的位置

    test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[ext]'//配置图片的路径img/logo.png
          }
        }

3. 作用

• 把源码中的图片复制一份放在打包后的文件夹下
• 修改打包后生成文件中引入图片的路径

四、使用url-loader处理图片

url-loader依赖的底层是file-loader，所以在使用url-loader依赖时，都需要引入file-loader依赖。url-loader它除了做file-loader能做的事情，还能做除file-loader以外的事情，url-loader会通过配置规则将一定范围大小的图片打包成base64的字符串，放到dist.js文件里，而不是单独生成一个图片文件，而file-loader在打包时，一定会生成单独的图片文件。

一.使用url-loader处理css文件中的图片

1.安装 css-loader 和 mini-css-extract-plugin

npm install --save-dev css-loader@4.1.1
npm install --save-dev mini-css-extract-plugin@0.9.0

2.配置loader和plugin处理css文件

配置css-loader依赖和MiniCssExtractPlugin.loader依赖

     {//匹配css文件
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {//公共路径
              publicPath: '../'//因为minicss插件会将文件都放到css文件下，这样上传文件里的js在引用图片地址时，会以为图片都在css目录下，而实际图片上传地址由配置file-loader依赖决定。
            }
          },
          'css-loader'
        ]
      },

3.安装url-loader处理css文件中的图片

npm install --save-dev url-loader@4.1.0

4.配置url-loader依赖

      {//配置url-loader
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: 'img/[name].[ext]',
            esModule: false,
            limit: 3000//限制小于3kb的文件转换成base64格式；但需要很多代价，适用于图标字体
          }
        }
      }

5.作用

• 将图片转成base64格式
• 不会把源码中的图片复制一份放在打包后的文件夹下

6.注意

• url-loader配置了limit属性时，需要同时安装file-loader依赖，那么当图片小于limit属性值时，就可以使用file-loader处理图片，避免代码报错
• url-loader没有配置limit属性时，可以不用安装file-loader依赖

二、使用url-loader依赖处理js文件中的图片

1.安装url-loader依赖

npm install --save-dev url-loader@4.1.0

2.配置url-loader依赖

      {//配置url-loader
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: 'img/[name].[ext]',
            esModule: false,
            limit: 3000//限制小于3kb的文件转换成base64格式；但需要很多代价，适用于图标字体
          }
        }
      }

三、使用url-loader依赖处理html文件中的图片

一样的，只是需要配合html-withimg-loader依赖，这里就不详细描述，结合上述安装依赖，配置即可。