Webpack4中vue-chartjs加载报错，如何配置babel-loader？

架构老林

2026-7-29

解决Webpack4 + vue-chartjs模块加载报错问题

问题原因

Webpack4默认不会转译node_modules目录下的文件，而你使用的vue-chartjs版本中包含了Webpack4不支持的可选链操作符（?.），导致编译报错。需要配置babel-loader专门转译vue-chartjs和chart.js这两个依赖包。

步骤1：安装必要依赖

首先安装Babel相关核心包和可选链支持插件：

npm install @babel/core babel-loader @babel/preset-env @babel/plugin-proposal-optional-chaining --save-dev

步骤2：修改Webpack配置文件

在项目的webpack.config.js中，添加或更新module.rules规则，让babel-loader处理指定依赖：

先在文件顶部引入path模块（未引入的话）：

const path = require('path');

在module.rules数组中添加以下规则：

module.exports = {
  // ... 其他已有的Webpack配置项
  module: {
    rules: [
      // ... 其他已有的loader规则（比如vue-loader、css-loader等）
      {
        test: /\.js$/,
        loader: 'babel-loader',
        // 仅转译vue-chartjs和chart.js，提升构建效率
        include: [
          path.resolve(__dirname, 'node_modules/vue-chartjs'),
          path.resolve(__dirname, 'node_modules/chart.js')
        ],
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-proposal-optional-chaining']
        }
      }
    ]
  }
};

可选：使用独立Babel配置文件

如果项目已有.babelrc或babel.config.js，可以把Babel配置移到这些文件中，简化Webpack配置：

创建或修改.babelrc：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

此时Webpack中的规则可简化为：

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    path.resolve(__dirname, 'node_modules/vue-chartjs'),
    path.resolve(__dirname, 'node_modules/chart.js')
  ]
}