使用Webpack 4无法加载owl-carousel的问题求助

嘿，我帮你分析下为啥Webpack找不到owl carousel的模块——毕竟jQuery和Bootstrap都正常加载，说明不是Webpack的基础解析问题，大概率是包本身或者导入路径的问题：

1. 先确认你装的是不是正确的npm包 #

你提到是按官方文档安装，但你执行的命令是npm install owl-carousel --save-dev，但Owl Carousel 2的官方npm包其实叫owl.carousel，owl-carousel是个旧的第三方包，和官方版本的目录结构完全不一样，这应该是核心问题！

先把错的包卸掉，装官方的：

npm uninstall owl-carousel --save-dev
npm install owl.carousel --save-dev

2. 调整入口文件的导入路径 #

装完官方包后，直接写import "owl.carousel"可能因为包的package.json里的main字段配置问题，导致Webpack找不到正确的入口文件。建议在index.js里直接指定完整的dist路径：

// 导入核心JS
import "owl.carousel/dist/owl.carousel.min.js";
// 别忘了导入样式文件，不然轮播样式会错乱
import "owl.carousel/dist/assets/owl.carousel.min.css";
import "owl.carousel/dist/assets/owl.theme.default.min.css";

3. （可选）检查Webpack的resolve配置 #

如果还是不行，可以在你的webpack.config.js里添加resolve配置，确保Webpack能正确识别node_modules里的包：

module.exports = (env, argv) => {
  // 其他配置...
  return {
    // 新增resolve配置
    resolve: {
      modules: [path.resolve(__dirname, 'node_modules')],
      extensions: ['.js', '.json']
    },
    // 其他原有配置...
  }
}

不过从你现有的配置来看，Webpack默认会去node_modules查找，这一步大概率不需要，但如果前面两步没解决，可以试试。

4. 测试构建 #

改完之后重新跑Webpack构建命令，应该就不会出现模块找不到的错误了。之后你就可以按照官方文档的方式初始化轮播：

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

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