使用 Webpack Encore 引入 RequireJS AMD 模块答案

【问题标题】：Pull in RequireJS AMD modules with Webpack Encore使用 Webpack Encore 引入 RequireJS AMD 模块
【发布时间】：2019-05-12 01:41:40
【问题描述】：

我有一堆 RequireJS AMD 模块，我需要将它们包含在我的项目中并使用 Webpack 引入。

看起来有人已经在这里做到了，但是我不确定 Webpack encore 是否可以做到这一点：Webpack with requirejs/AMD

这是我的 webpack.config.js：

var Encore = require('@symfony/webpack-encore');

Encore
    // directory where compiled assets will be stored
    .setOutputPath('web/build/')

    // public path used by the web server to access the output path
    .setPublicPath('/app/build')

    // only needed for CDN's or sub-directory deploy
    .setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */
    .addEntry('app', './web/assets/js/app.js')

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()

    .enableSourceMaps(!Encore.isProduction())

    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // uncomment if you use Sass/SCSS files
    .enableSassLoader()

    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

如何引入我的 RequireJS 模块？

【问题讨论】：

标签： webpack requirejs frontend amd webpack-encore

【解决方案1】：

我一般对 Webpack 中的 requirejs/AMD 没有任何经验。但是，在 webpack.config.js 文件的底部，您可以根据需要修改 Webpack 配置。例如：

const config = Encore.getWebpackConfig();

// make changes
// I don't know if these are correct - just referencing the
// other SO you linked to
config.output.library = '[name]';
config.output.libraryTarget = 'amd';
config.output.umdNamedDefine = true;


module.exports = config;

祝你好运！

【讨论】：