Webpack集成Summernote报summernote is not a function错误如何解决？

数据老陈

2026-9-29

解决方案

1. 修复jQuery大小写冲突与实例统一问题

在webpack配置文件中添加别名配置，将大小写两种jQuery引用都指向同一个安装包，消除大小写警告，同时确保所有模块使用同一个jQuery实例：

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  // 其他原有配置保持不变
  resolve: {
    alias: {
      // 把大写jQuery的引用也指向小写jquery的路径
      'jQuery': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js'),
      'jquery': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js')
    }
  },
  plugins: [
    // 注入全局jQuery变量，满足summernote的全局依赖要求
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
}

2. 调整依赖引入方式

修改JS文件中的引入代码，不需要额外手动绑定jQuery，直接按如下方式引入即可：

import 'bootstrap';
// 配置别名后引入dist版本也不会出现大小写警告
import 'summernote/dist/summernote';
// 记得引入summernote的样式文件，否则编辑器样式会异常
import 'summernote/dist/summernote.css';

// 确保DOM元素#summernote已存在后再执行初始化
document.addEventListener('DOMContentLoaded', function() {
  $('#summernote').summernote({
    // 你的配置项
  });
});