webpack中处理引入的本地图片

一、处理html文件中的图片

1.安装loader:

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

2.配置loader:

{test:/\.(htm|html)$/,

loader:'html-withing-loader'}

3.安装file-loader:

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

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

4.配置file-loader:

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

二、处理css文件中的图片

1.file-loader

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

npm install --save-dev css-loader@4.1.1

npm install --save-dev mini-css-extract-plugin&#