无法通过Webpack从Vue中提取css文件

Question

我使用Webpack 1.12.0构建Vue组件。我的目标是为我的包创建一个[name].min.js文件和[name].min.css文件。

我尝试使用extract-text-webpack-plugin将css提取到单个文件中，并遵循Webpack 1.x的此说明：https://vue-loader.vuejs.org/en/configurations/extract-css.html

这是我的webpack.base.conf.js文件：

var path = require('path')

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
    filename: 'build.js',
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    alias: {
      vue$: 'vue/dist/vue.common.js',
      components: path.resolve(__dirname, '../src/components'),
    },
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue',
      },
      {
        test: /\.js$/,
        loader: 'babel!eslint',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json',
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
      },
    ],
  },
}

这是我的webpack.prod.conf.js文件，用于创建上述两个文件：

var webpack = require('webpack')
var config = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin');

config.target = 'node'
config.output.filename = '[name].min.js'
config.output.libraryTarget = 'commonjs2'

config.entry = './src/components/[name].vue'

var SOURCE_MAP = true

config.devtool = SOURCE_MAP ? 'source-map' : false

config.vue = {
  loaders: {
    css: ExtractTextPlugin.extract("css"),
  }
},

config.plugins = (config.plugins || []).concat([
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"production"'
    }
  }),

  new ExtractTextPlugin("[name].min.css"),

  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }),

  new webpack.optimize.OccurenceOrderPlugin()
])

module.exports = config

我的文件夹结构是：

├── build
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── dist
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   │   ├── [name].vue
│   │   ├── script.js
│   │   ├── style.css
│   │   └── template.html
│   ├── index.html
│   ├── main.js
└── yarn.lock

[name].vue文件包含script.js，style.css和template.html

<template src="./template.html"></template>

<script src="./script.js"></script>

<style src="./style.css"></style>

要运行的命令是 webpack --progress --hide-modules --config build/webpack.prod.conf.js

但是，当我运行此命令时，只会创建[name].min.js和[name].min.js.map。没有[name].min.css。我该怎么做才能创建css文件？