webpack 图片资源处理

备注：

 css 引用图片资源

1. 安装loader

yarn add file-loader --dev

2. 配置

const path = require("path");
const extracttextplugin = require("extract-text-webpack-plugin");
module.exports = {
  entry:"./main.js",
  output:{
   filename:"bundle.js",
   path:path.resolve(__dirname,"./dist"),
   //  publicPath:"" // 可以进行cdn 资源分离处理
  },
  module:{
   rules:[
    {
     test: /.css$/,
     loader:extracttextplugin.extract({
       use:["css-loader"],
     })
     },
     {
　　　test: /.(png|jpg)$/,
　　　loader: 'file-loader?name=[hash:8].[name].[ext]'
　   }
    ]
  },
  plugins:[
   new extracttextplugin({
    filename:`app.css`,
   })
  ]
}

3. 参考资料

https://github.com/webpack-contrib/file-loader