How to import/load entire file to include in my bundle?

Question

How to include an entire file into my bundle main.js?

ES6 can import/export functions and classes. But what if i want to include the whole content from another file into my bundle main.js? how to do it?

I came across the query on Stackoverflow: Managing jQuery plugin dependency in webpack.

I'm not sure about this question though. Those options given there seem to target injecting implicit globals, configuring this, disabling AMD, to include large dists. I don't think this is what i want.

Let's say i have two files in src directory
1- rough.js

const rgh = "qwerty"

2- index.js

import './rough.js' //something like this
console.log (rgh)

Now what i expect in bundle.js is

const rgh = "query";
console.log(rgh)

I just want all the content inside one of my file to get all transported to index.js for webpack to bundle them

@IamL some statements, loops etc. I mean regardless of what the content is, what i s the way to load an entire content in the bundle? — Jake, Nov 26 '19 at 08:35
wrap them inside a function and call that function on the when importing? — I am L, Nov 26 '19 at 08:49
Why does that question not answer yours? There are [several valid approaches](https://stackoverflow.com/a/28989476/542251) there for your problem? The script loader plugin seems exactly what you want? — Liam, Nov 26 '19 at 09:38
Does this answer your question? [Managing jQuery plugin dependency in webpack](https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack) — Liam, Nov 26 '19 at 09:39
@Liam in script-loader it is stated in the github pages that "It has a known issue of generating non-deterministic hashes (see #49, #56, #60). Do not use it." and it is also no longer maintained — Jake, Nov 26 '19 at 10:21
@Liam the other five options seem to target ''injecting implicit globals", "configuring this", "disabling AMD", "to include large dists". I dont think this is what i want. I just want the context inside one of my file to get all transported to index.js for webpack to bundle them — Jake, Nov 26 '19 at 10:44
Ok, you need to put all this into your question. Simply saying, I need this, here's a similar question, isn't very helpful. Explain why this question isn't helpful and what you need that's missing. To repeat, do this in the question, not here in comments — Liam, Nov 26 '19 at 10:46
*I just want the context inside one of my file to get all transported to index.js* So you want to **inject implicit globals**, i.e. you want all the variables in your file to be implicitly available inside the global scope — Liam, Nov 26 '19 at 10:47
@Liam the word "context" is a typo; i meant "content", i presume this is no different here. I edited my question as u suggested. And i dont just want variables to be available. It's just simple. I want the file to be appended in the bundle the same way it would be by using ` — Jake, Nov 26 '19 at 11:07
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/203097/discussion-between-jake-and-liam). — Jake, Nov 26 '19 at 11:08
I've got to prepare for a meeting, if I find time later I'll try and explain this to you. — Liam, Nov 26 '19 at 11:28
@liam yeah ok. That will be a huge favour if i get this nailed. it already ate more than 24 hours — Jake, Nov 26 '19 at 11:40
[This will help](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) and [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) — Liam, Nov 26 '19 at 11:43
i know about scope and closure. May be i'm missing some pieces. i'm try to figure out — Jake, Nov 26 '19 at 12:58
What your expecting is wrong, look at my answer carefully, the `console.log` is wrapped in a [closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) — Liam, Dec 02 '19 at 08:37
@Liam-ReinstateMonica So what is the solution for my expected result? modularize my all unmodularize functions and variables? — Jake, Dec 03 '19 at 10:38

Liam · Accepted Answer · 2019-11-27T10:28:11.953

Those options given there seem to target injecting implicit globals, configuring this, disabling AMD, to include large dists. I don't think this is what i want.

To understand this you need to understand what webpack is doing for you. Web pack takes a series of Javascript files (and more importantly their contents) and parses these into one file. That's what it does from a file point of view, but if you ignore the file and think about what it does from a code point of view, it takes each one of the imported objects and makes them available to other objects depending upon the rules you define in your code (using import and export). You can think of this from a closure point of view something like this:

if you have some code like:

import a from 'a.js';

export default b(){
    console.log(a.test());
}

This will be turned into something like, in one js file:

var a = (function() {
    var testStr = "test";
    function test(){
        return testStr;
    }
    return {test:test};
})();

var b = (function(a) {
    console.log(a.test());
})(a);

So you can see that the file isn't really important. What's important is the scope. b can use a because it is injected into it's scope (In this instance as a IIFE).

In the above example a and b are in the global scope but testStr isn't.

So when your talking about "importing my file", you need to forget about that and think about what objects in that file you want to import how. Any variables "in that file" declared directly var a = ....; are in the global scope. So it sounds like what you want to do is import the objects in that file into the global scope.

And now its making sense. Now I presume providePlugin is what i want — Jake, Nov 27 '19 at 16:16
It still doesn't get me the result what i expect. I have added more details to what i expect in question. Added a bounty too — Jake, Nov 30 '19 at 10:46

score -2 · Answer 2 · answered Nov 26 '19 at 10:06

-2

you just need to import that file in main.js like this way

answered Nov 26 '19 at 10:06

Ijaz Ali

27
3

in the main.js of dist or src? it would be more convenient if i add that in index.js and let the webpack load it. i hope u get my point – Jake Nov 26 '19 at 10:23
yes you can. like this way `code` // ===compile our main.js file mix.js('resources/assets/main.js', './') vendor bundle .extract(['vue', 'bootstrap-vue', 'animejs', 'axios']) – Ijaz Ali Nov 26 '19 at 11:19

How to import/load entire file to include in my bundle?

2 Answers2