Symfony3转Symfony6：Webpack Encore迁移Inspinia插件遇模块缺失问题

一、模块未找到错误的针对性修复 #

1. jQuery 依赖问题 #

• 先安装jQuery包：npm install jquery --save
• 在webpack.config.js中启用全局jQuery自动注入：

  Encore
      // ...其他配置项
      .enablejQuery() // 自动将$和jQuery挂载到window全局对象
  ;
  

• 若部分插件仍无法识别全局jQuery，可在app.js手动补充挂载：

  import $ from 'jquery';
  window.$ = window.jQuery = $;
  

2. Pace、CodeMirror 模块缺失 #

• 安装对应npm包：

  npm install pace-js codemirror --save
  

• 在app.js中正确导入（包含所需样式）：

  // Pace 加载进度条
  import 'pace-js';
  import 'pace-js/themes/blue/pace-theme-minimal.css'; // 替换为模板使用的主题样式
  
  // CodeMirror 代码编辑器
  import 'codemirror/lib/codemirror.css';
  import 'codemirror';
  // 按需导入额外模式/主题：
  // import 'codemirror/mode/htmlmixed/htmlmixed.js';
  // import 'codemirror/theme/monokai.css';
  

3. Summernote 字体文件找不到 #

• 确保Summernote通过npm安装：npm install summernote --save
• 在CSS中引用字体时用~前缀指向node_modules资源，避免路径错误：

  @font-face {
      font-family: 'summernote';
      src: url('~summernote/dist/font/summernote.woff2') format('woff2'),
           url('~summernote/dist/font/summernote.woff') format('woff');
  }
  

• 若模板自带自定义字体，通过Webpack Copy插件复制到public目录：
  在webpack.config.js中添加：

  const CopyPlugin = require('copy-webpack-plugin');
  
  Encore
      // ...其他配置项
      .addPlugin(new CopyPlugin({
          patterns: [
              { from: './assets/fonts/summernote', to: 'fonts/summernote' } // 替换为你实际的字体存放路径
          ]
      }))
  ;
  

二、配置正确性检查要点 #

webpack.config.js 核心配置项 #

需确保包含以下关键配置：

• 入口文件定义：.addEntry('app', './assets/app.js')
• 静态资源文件名规则（带哈希缓存）：

  Encore.configureFilenames({
      images: '[path][name].[hash:8].[ext]',
      fonts: '[path][name].[hash:8].[ext]'
  });
  

• CSS预处理器支持：.enableSassLoader()（用Sass时）或.enablePostCssLoader()
• 输出目录配置：.setOutputPath('public/build/').setPublicPath('/build')

app.js 导入规范 #

• 第三方插件优先从node_modules导入，避免手动拷贝资源导致的路径混乱
• 自定义脚本拆分到单独文件（如./assets/js/custom.js），再在app.js中导入：import './js/custom.js'
• 插件初始化代码放在DOM加载完成后执行：

  $(document).ready(function() {
      // 初始化CodeMirror编辑器
      const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
          lineNumbers: true,
          mode: 'htmlmixed'
      });
  
      // 初始化Summernote富文本编辑器
      $('#summernote').summernote();
  });
  

三、添加jQuery插件与自定义JS的最佳方式 #

1. 第三方jQuery插件管理 #

• 优先npm安装：多数旧插件都有npm包（如jquery-ui、datatables.net），直接通过npm install安装后导入即可
• 全局兼容处理：对于无npm包或依赖全局jQuery的小众插件，将其放在./assets/js/plugins目录，在app.js中导入：

  import './js/plugins/custom-jquery-plugin.js';
  

  插件代码建议包裹在(function($) { ... })(jQuery)中，确保依赖正确

2. 自定义JS组织 #

• 按功能拆分模块：比如admin-dashboard.js、form-validation.js，通过多入口打包减少冗余：

  // webpack.config.js
  Encore
      .addEntry('app', './assets/app.js')
      .addEntry('admin', './assets/js/admin.js')
  ;
  

• 使用ES6模块规范：自定义代码写成模块化函数，按需导入，避免全局变量污染
• 利用tree-shaking优化：只导入插件的必要功能，减少bundle体积（如只导入Summernote核心功能而非全部扩展插件）

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