Webpacker (or Webpack) environment.js vs application.js

user_2781238 0
Viewed 110

Beginner question regarding webpack/er environment.js and application.js For importing a JS library like jQuery, Popper etc. I am using a webpack provide plugin in environment.js

// environment.js
const webpack = require("webpack");
    environment.plugins.append("Provide", new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
      Popper: ['popper.js', 'default']
    }));

This makes jQuery and Popper available to Bootstrap and any JS code I write. But if I am using select2 it to the list of plugins does not work. I have to import it in my application.js

//application.js
import select2;

If I want use Quilljs I have to import it (a bit differently though) in my application.js

import Quill from 'quill';

What is the difference between importing a library vs adding a library as a plugin. I have done quite a bit of Googling but cannot find a resource that explains these concepts. Can someone explain this or point me to a resorce.

webpacker webpack ruby-on-rails
1 Answers

Webpack plugins are JavaScript objects that have an apply method that the webpack compiler can call. So it's likely that select2 and Quill do not have that method available, and are therefore not able to be rendered as plugins.

The imports you're using instead are standard module imports, and that's an appropriate way to be pulling them in for use in your files, IMO.

user_84414650
Related