如何在Webpack中导入jQuery扩展？导入owl.carousel遇模块未找到错误

这个错误是因为Webpack不认识你用的imports?jQuery=jquery!语法——这是旧版imports-loader的写法，而且大概率你没安装对应的loader，或者当前Webpack版本（比如Webpack 4+）已经不支持这种语法了。下面给你两种可行的解决方案：

方案一：使用新版imports-loader语法（推荐） #

1. 先安装必要依赖 #

确保你已经安装了jquery、owl.carousel和新版的imports-loader，同时别忘了处理CSS的loader：

npm install jquery owl.carousel imports-loader css-loader style-loader --save-dev

2. 修改导入代码与Webpack配置 #

把原来的导入语句简化成：

// 导入轮播样式
import 'owl.carousel/dist/assets/owl.carousel.css';
// 导入jQuery
import $ from 'jquery';
// 导入owl.carousel
import 'owl.carousel';

然后在webpack.config.js中添加规则，让imports-loader自动给owl.carousel注入jQuery：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // 处理CSS文件
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 给owl.carousel注入jQuery
      {
        test: require.resolve('owl.carousel'),
        use: [
          {
            loader: 'imports-loader',
            options: {
              imports: ['default jquery $', 'default jquery jQuery'],
            },
          },
        ],
      },
    ],
  },
};

方案二：用Webpack的ProvidePlugin全局注入jQuery #

这种方式更省心，让Webpack自动把jQuery注入到所有需要它的模块里，不需要手动处理导入逻辑：

1. 安装依赖 #

确保核心依赖已安装：

npm install jquery owl.carousel css-loader style-loader --save-dev

2. 修改Webpack配置 #

在webpack.config.js中添加ProvidePlugin插件：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ],
  module: {
    rules: [
      // 处理CSS文件
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

3. 简化导入代码 #

现在你的导入可以写成这样，无需再手动处理jQuery注入：

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
// 也可以按需导入$用于局部操作
import $ from 'jquery';

额外提示 #

如果你的Webpack版本是5，还需要处理owl.carousel自带的字体/图片资源，可以添加asset模块规则：

// webpack.config.js中module.rules添加
{
  test: /\.(woff|woff2|eot|ttf|otf|png|svg)$/,
  type: 'asset/resource'
}

内容的提问来源于stack exchange，提问作者Constantor