webpack 中 vue-loader怎么配置？

Question

即test: /.vue$/,这种情况下怎么配置？网上资料少的可怜。
有部分老的文档写到使用extract-text-webpack-plugin，但是这个plugin已不再维护，取而代之的是MiniCssExtractPlugin，需要用这个来配合vue-loader吗？

Answer 1

这种问题网上资料少的可伶？没搞错吧。。。

你的标题是配置vue-loader，这个只是解析vue文件而已，如果只是问这个那很简单啊，如下配置就行了

{ 
    test: /\.vue$/, 
    loader: 'vue-loader'  
}

Answer 2

1. webpack 从 3 => 4 发生了很大变化，vue-loader 的变化也是跟着它来的
2. 新版 vue-loader（>=15）采用的是 webpack 推荐的做法，把各部分拆开，交给独立负责的 loader 处理。比如 <script> 部分就按照语言，交给 ts-loader 或者 babel-loader；<template> 就交给 html-loader 或者 pug-plain-loader
3. 而 css，在开发环境中，它的加载顺序是 stylus-loader > css-loader > style-loader，因为要把 css inlne 到页面里面。到了生产环境，因为要提取出独立的 css 文件，所以要 stylus-loader > css-loader > MiniCssExtractPlugin.loader。

以下是范例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.styl(us)?$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader',
        ],
      },  
    ],
  },
}

// webpack.config.prod.js
const config = require('./webpack.config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const cssRule = config.module.rules[1];
cssRule.use[0] = MiniCssExtractPlugin.loader;

module.exports = config;

建议你好好看下：

1. 如何从 v14 迁移
2. CSS 提取

vue 的资料已经算多的了，如果 vue 的资料你都找不到，那我只好……