webpack使用图片

使用url

body {
  background: url("../img/test.jpg");
}

loader

cnpm install url-loader --save-dev
cnpm install file-loader --save-dev

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片,小于limit时,会将图片编译成base64字符串形式
              // 当加载的图片,大于limit时,需要使用file-loader加载
              limit: 8192,
              // 名字清晰，还能解决名字冲突
              name: '[path][name].[hash:8].[ext]',
            },
          },
        ],
      },
    ],
  },
};

output: {
  // 解决运行报错
  publicPath: 'dist/'
},

运行效果