CODEWITHSUNDEEP
webpackrequirejsfrontendamdwebpack-encore
crmpicco
crmpicco

Reputation: 17181

Pull in RequireJS AMD modules with Webpack Encore

I have a bunch of RequireJS AMD modules that I need to include in my project and pull in with Webpack.

It looks like someone has managed to do it here, however i'm not sure if this is possible with Webpack encore: Webpack with requirejs/AMD

This is my 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();

How can I pull in my RequireJS modules?

Upvotes: 1

Views: 377

Answers (1)

weaverryan
weaverryan

Reputation: 530

I don't have any experience with requirejs/AMD in Webpack in general. However, at the bottom of your webpack.config.js file, you can modify the Webpack configuration however you want. For example:

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;

Good luck!

Upvotes: 1

Related Questions