如何在webpack中填充tinymce？

Question

我试图让TinyMCE的通过的WebPack认可.它设置了一个名为tinymceon 的属性window,所以显然有一个选项是require()使用这样的语法(在webpack文档的EXPORTING 部分的底部描述):

require("imports?window=>{}!exports?window.XModule!./file.js

但在这个例子中,如何./file.js解决？我通过npm安装了tinymce,我无法弄清楚如何指定tinymce.js文件的正确路径.

无论如何,我宁愿在我的配置中处理这个问题,并且require('tinymce')如果可能的话,我可以安装exports-loader并添加以下内容(基于此讨论):

module: {
    loaders: [
        {
            test: /[\/]tinymce\.js$/,
            loader: 'exports?tinymce'
        }
    ]
}

不幸的是,这不起作用.我的配置有什么问题？

Answer 1

npm上的tinymce模块不能直接使用,但包含4个不同的库分布.即:

• tinymce/tinymce.js
• tinymce/tinymce.min.js
• tinymce/tinymce.jquery.js
• tinymce/tinymce.jquery.min.js

为了能够require('tinymce')在您的代码中执行,您可以在webpack配置中添加别名,以及为您选择的分发添加自定义加载程序.

resolve: {
  alias: {
    // require('tinymce') will do require('tinymce/tinymce') 
    tinymce: 'tinymce/tinymce',
  },
},
module: {
  loaders: [
    {
      // Only apply on tinymce/tinymce
      include: require.resolve('tinymce/tinymce'),
      // Export window.tinymce
      loader: 'exports?window.tinymce',
    },
  ],
},

在哪里可以替换tinymce/tinymce您的选择分配.

Answer 2

就像@cchamberlain一样,我最终使用脚本加载器来进行tinymce,但是为了加载默认情况下不需要的插件和其他资源,我使用了CopyWebpackPlugin而不是ES6来获得更多可配置的解决方案.

var copyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
//...
  plugins: [
    new copyWebpackPlugin([
      { from: './node_modules/tinymce/plugins', to: './plugins' },
      { from: './node_modules/tinymce/themes', to: './themes' },
      { from: './node_modules/tinymce/skins', to: './skins' }
    ])
  ]
};