vue 报错 "extract-text-webpack-pl

新建项目安装好依赖包之后报错
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

解决方法：

在 webpack.dev.conf.js 中添加extract-text-webpack-plugin 配置

const ExtractTextPlugin = require('extract-text-webpack-plugin')

plugins: [
    .............
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      allChunks: false,
    }),
  ]

重新 npm run dev 就成功运行了

文档： webpack-ExtractTextWebpackPlugin

1. 用途：
   它将所有的入口chunk(entry chunks)中引用.css，独立到移动分离的css文件。因此，样式将不再内嵌到JS bundle中，而是会放到一个单独的CSS文件（即style.css）当中。如果样式文件大小较大，会更快提前加载，因为CSS bundle 会跟 JS bundle并行加载
2. 用法：

  const ExtractTextPlugin = require('extracrt-text-webpack-plugun')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

3. 更多配置参考文档： https://webpack.docschina.org/plugins/extract-text-webpack-plugin/