webpack 打包图片资源

webpack.config.js中的loader设置

  //如果有多个loader
      // {
      //   test:'/\.(png|jpg|fig)',
      //   use:['url-loader',{loader: 'file-loader',options:{}}]
      // },
        //单个loader
      {
        test:/\.(png|jpg|fig)$/,
        loader:'url-loader',
        options:{
          publicPath:'./images',
          outputPath:'images/',
          limit:1024 * 16,
          name:'[hash].[ext]'
        }
      },
        //html内部图片连接
      {
        test:/\.(html)$/,
        loader: 'html-loader',
        options: {
          //统一一下格式
          esModule:false
        },
      }

css中引入的图片如果是单个loader直接使用就可以，如果是多个使用对象方式

html内部使用加上esModule:false,不然图片引入不到