Webpack Encore集成Tinymce出现静态资源404报错如何解决

当前报错核心是两个配置遗漏：

1. 你只在Webpack配置里复制了Tinymce的skins皮肤目录，Tinymce运行默认会动态拉取models、icons、themes三类核心JS资源，这些资源没被复制到构建输出目录，自然会报404。
2. 初始化Tinymce时没有指定静态资源基础路径，Tinymce默认会从当前页面路径下找资源，和Webpack Encore输出的/build静态资源路径不匹配。

选任意一种方案即可，第二种更符合Webpack模块化的打包逻辑。 #

方案1：补全静态资源复制规则+配置资源路径（改动最小） #

1. 修改webpack.config.js里的文件复制配置，把缺失的三类核心资源都加入复制规则：

.copyFiles({
    from: 'node_modules/tinymce/skins',
    to: 'skins/[path]/[name].[ext]'
})
.copyFiles({
    from: 'node_modules/tinymce/models',
    to: 'models/[path]/[name].[ext]'
})
.copyFiles({
    from: 'node_modules/tinymce/icons',
    to: 'icons/[path]/[name].[ext]'
})
.copyFiles({
    from: 'node_modules/tinymce/themes',
    to: 'themes/[path]/[name].[ext]'
})
// 后续如果用到Tinymce插件，再补plugins目录的复制规则即可
// .copyFiles({
//     from: 'node_modules/tinymce/plugins',
//     to: 'plugins/[path]/[name].[ext]'
// })

2. 修改Tinymce初始化配置，显式指定资源根路径：

require('tinymce');

$(document).ready(function () {
    if($("#reportDescription").length > 0){
        tinymce.init({
            selector: "textarea#reportDescription",
            base_url: '/build', // 指向Encore构建输出的静态资源根目录，按你项目实际部署路径调整
            suffix: '.min' // 可选，加载压缩版资源减小体积
        });
    }
});

3. 重启本地开发服务/重新执行构建命令，等构建完成后确认public/build目录下存在skins、models、icons、themes四个文件夹，再刷新页面即可。

方案2：手动引入核心模块（更符合Webpack模块化机制，无额外动态请求） #

这种方式会把Tinymce的核心JS模块直接打包进你的业务JS bundle，不需要运行时动态拉取JS资源，只需要保留皮肤文件的复制即可。

1. 保留webpack.config.js里的skins复制规则，不需要额外复制models、icons、themes目录。
2. 修改业务JS代码，手动引入所有依赖的核心模块：

// 引入Tinymce核心
require('tinymce');
// 手动引入核心依赖模块，Webpack会把这些代码打包进主bundle，不需要动态加载
require('tinymce/models/dom');
require('tinymce/themes/silver');
require('tinymce/icons/default');
// 后续用到插件直接在这里引入即可，比如：
// require('tinymce/plugins/link');
// require('tinymce/plugins/lists');

$(document).ready(function () {
    if($("#reportDescription").length > 0){
        tinymce.init({
            selector: "textarea#reportDescription",
            skin_url: '/build/skins/ui/oxide', // 单独指定皮肤路径，皮肤是CSS资源无法通过JS模块引入
        });
    }
});

3. 重新执行构建即可生效。

关于require和import的区别：

• require是CommonJS模块规范的语法，import是ES Module规范的语法
• Webpack Encore对两种语法都完全支持，在这个场景下用哪种写法都可以，不需要特意替换，保持项目代码风格统一就行。

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