Webpack and Loading custom scripts

Question

For the life of me I dont understand how webpack works. Please can somebody help me. Im going to explain with my situation but its actually more of a conceptual question of how to go about using webpack

So im working on an angular 2 project with a webpack starter. I have some js scripts that i got from AWS (my SDK for API-Gateway). Its about 10 js files. Currently i have those 10 files listed in my index.html, and that works great. Obviously this isnt actually great because that means 10 round trips to the server to collect them. So hence my journey into trying to get webpack to include them in a bundle starts

So what i tried to do was to import the files one by one in my main typescript file. The file where my app gets bootstrapped. Just like this for example:

import 'assets/aws-sdk/lib/axios/dist/axios.standalone.js';
import 'assets/aws-sdk/lib/CryptoJS/rollups/hmac-sha256.js';
import 'assets/aws-sdk/lib/CryptoJS/rollups/sha256.js';
...

Is this even remotely the right thing to do. This doesnt work. It complains about CryptoJS not being available in the files that require it. There are some crypto-js files in those that i bring in, and the files that use the variable 'CryptoJS' dont seem to see it.

I found in my webpack config a ProvidePlugin that seems to load jquery like this

new webpack.ProvidePlugin({
  jQuery: 'jquery',
  $: 'jquery',
  /*CryptoJS: 'CryptoJS'*/
}),

So i added Crypto thinking it needs that. Doesnt work.

My question is this. The js files i need to use internally use a variable called CryptoJS to do things like this:

function hash(value) {
   return CryptoJS.SHA256(value);
}

That works fine including all the scripts in index.html, but how do i get my webpack app to understand what that means. How do i import and bundle these files, and how do i use a varable internal to those files like CryptoJS.

3uPh0riC · Accepted Answer · 2016-06-09 16:24:22Z

2

Okay nevermind after hours of struggling i managed to figure it out. The import i was doing was wrong, to add the js files to the global space (equivalent of adding them to the index.html) is to import them like so

require('script!./assets/aws-sdk/lib/axios/dist/axios.standalone.js');

That script loader does the magic. Youll need that in your project as well can be installed from npm

answered Jun 9, 2016 at 16:24

3uPh0riC

4901 gold badge4 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack and Loading custom scripts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related