webpack 如何指定文件输出到指定文件夹

Question

这是我的配置：

var webpack = require('webpack')

module.exports = {
  entry: './main.js',
  output: {
    path: './dist',
    publicPath: './dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      { 
          test: /\.(png|jpeg|gif)$/,
          loader: 'url-loader?limit=8192' ,
      }
    ]
  }
}

如果只是这样的话 ，我的图片资源都会输出到dist文件夹下，我希望把所有图片资源都输出到dist/images文件夹下 ,需要如何配置？

Answer 1

url-loader的readme里有些，超过limit的图片会让 file-loader处理
加个name参数就行了

    url-loader?limit=8192&name=images/[name].[ext]

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

Answer 2

这个问题我遇到过，用file-loader。

{ 
      test: /\.(png|jpeg|gif)$/,
      loader: 'file-loader?name=images/[hash].[ext]' ,
  }

这种方式不得采用base64，直接将文件存到对应的文件夹，这里我用的images,也就是存到publicPath目录下面。
详情可以参考 file-loader