webpack 中 vue-loader怎么配置?

呼啦啦
  • 393

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

回复
阅读 800
2 个回答

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

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

{ 
    test: /\.vue$/, 
    loader: 'vue-loader'  
}
  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 的资料你都找不到,那我只好……

你知道吗?

宣传栏