Webpack 5 配置 Vue 脚手架问题及解决方法

今天早上听我司架构讲了一下公司后面的前端架构之后回来重写了一下 vue 的脚手架，但是碰到了一些奇怪的问题。

配置 webpack

我用的是 webpack5，根据文档建议，用了 vue-loader

复制文档给的 wepack 代码如下：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin(),
  ],
};

vue 文件代码，看上去也没什么问题。

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'Hello world!',
      };
    },
  };
</script>

<style>
  .example {
    color: red;
  }
</style>

问题出现

style 代码块里面的代码失效。

打包的时候，发现 style 代码块里面的代码不生效，字体颜色不是红色。

我是一脸楞逼，网上到处查，找不到答案。打包的 js 代码里面也能看到color: red;字样，但是不管怎么调，页面代码里面就是没有样式。

百度找不到，谷歌也找不到，群里问了一圈也没什么结果。

然后我去了 vue-style-loader 的仓库去看看有没有线索，果然，发现第一条 issues css-loader 4.x.x support?

原因和解决方式如下

@huangkaiqiao for most purposes you can safely swap out vue-style-loader with style-loader and your project should work fine. Also see #42

I will look into what exactly is causing the problem…

Edit: the problem is that css-loader’s esModule option is set to true by default in v4. The correct workaround for now is replacing the css-loader declaration in your webpack config with:

{
    loader: 'css-loader',
    options: {
        esModule: false
    }
}

也就是 webpack rules 应该这么写

{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: {
        esModule: false,
      },
    },
  ],
},

修改 - 保存 - 打包 - 测试

总算正常了。

吐槽

issues 里提到可以用 style-loader 去代替，群友 Sky（资深前端专家，全平台客户端开发，底层架构） 也是这么说的，然后其他群友表示没用过 vue-style-loader

我去看了一下 vue-style-loader github 项目更新记录，2 年没更新了。

所以还是换 style-loader 以绝后患吧，顺便吐槽一下 vue-loader 竟然不更新文档。

因为网上对于 webpack 配置 vue 的教程和案例非常少，大家都非常依赖 vue cli 了。

然后我推荐一下 Sky 大佬（资深前端专家，全平台客户端开发，底层架构）的 Vue 脚手架 自己配的脚手架，写的太厉害了，不适合新手，我哪天有时间了，写一个适合新手的。