webpack2，打包图片路径问题

Question

我使用vue-cli生成项目工程，然后修改webpack.base.conf.js，在rules中增加图片打包的配置如下：

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    exclude: /^node_modules$/,
    loader: 'url-loader',
    options: {
      limit: 10,
      name: utils.assetsPath('images/[name].[ext]')
    }
}

执行npm run build，并没有在dist目录下生成图片目录和图片文件，为何？

Answer 1

url-loader是将小图片直接base64编码内联到js中，按照你的配置只有在大于10字节时，在images目录才会有图片生成。

补充说明：

Answer 2

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 1,
          name: utils.assetsPath('assets/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
          postcss: [require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })]
        }
      }
    ]
  }

为什么添加postcss配置后就不能生成images和css目录，去掉了就可以？