Symfony Webpack Encore添加JS路径及moment模块报错解决方案

./locale找不到的核心原因是直接引入本地预压缩的moment.min.js产物时，webpack做静态依赖分析会识别到文件内部对./locale的动态引用，但单独存放的min.js文件没有配套完整的locale目录结构，导致解析失败。另外现有导入语句存在路径错误：原文件为custom.js，导入时写成了./js/custom/js，文件名和路径均不匹配，即使解决moment的报错这里也会触发新的文件找不到错误。

根据项目需求二选一即可：

方案1（推荐）：通过npm安装依赖引入，替代本地单独存储的min.js #

这是webpack项目最规范的引入方式，不会出现路径解析问题，还能按需打包减小产物体积。

• 先安装对应第三方依赖：

npm install popper.js moment --save

• 在入口app.js里按如下方式导入，注意修正自定义js的路径，要和项目实际存放位置匹配：

// 导入popper，需要全局调用的话挂到window对象上
import Popper from 'popper.js';
window.Popper = Popper;

// 导入moment，按需引入需要的语言包即可，不会全量打包所有locale
import moment from 'moment';
// 需要中文语言包就加下面这行，不需要可以省略
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
window.moment = moment;

// 导入自定义的custom.js，注意路径要写对，不要写错文件名
import './assets/js/custom.js';

改完之后重新执行npm run dev即可正常打包，npm安装的moment包目录结构完整，webpack可以正常解析所有依赖。

方案2：保留本地静态min.js文件，修改webpack配置跳过依赖解析 #

如果不想改动现有文件存放方式，继续使用本地存储的几个min.js，只需要修改webpack配置，让它不要对已经压缩好的第三方文件做递归依赖分析即可：

• 先修正导入语句的路径错误：

// 路径要和本地实际文件位置对应
import './assets/js/popper.min.js';
import './assets/js/moment.min.js';
import './assets/js/custom.js';

• 打开项目根目录的webpack.config.js配置文件，在module配置项里添加noParse规则，匹配本地存放的min.js文件，跳过解析流程：

module.exports = {
  // 保留原有的entry、output、loader等所有配置
  module: {
    noParse: /[\\/]assets[\\/]js[\\/].*\.min\.js$/,
    // 保留原有的rules等其他配置
  }
}

注意：这种方式下moment的语言包不会被自动打包，如果需要使用多语言能力，要单独引入对应locale文件。

补充方案：保留原有script标签引入方式 #

如果不想把这几个第三方库打包进app.js，可以完全保留原来的script标签引入写法，只需要在webpack配置里声明这几个是外部依赖，打包时不会解析它们：

// webpack.config.js
module.exports = {
  // 其他原有配置保留
  externals: {
    popper: 'Popper',
    moment: 'moment'
  }
}

配置完成后，代码里依然可以正常写import Popper from 'popper'，webpack会直接从全局变量读取对应对象，不会尝试打包本地文件，也不会出现路径报错。

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