An easy way using webpack

Javascript, Utilities, Web Development, 2016-01-14 11:07:36 UTC

1. Install webpack 

$ npm install webpack -g

 

2. Create index.html

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

As you can see, we will run bundle.js. 

We need to create bundle.js from other source or we need to run webpack command to produce this file.

Another source that I mention is entry.js.

 

3. Create entry.js

document.write('hello webpack');

 

4. Run webpack

$ webpack ./entry.js bundle.js

 

5. And if you run your application, you should see "hello webpack"

 

6. In webpack, you can fire single javascript file and 'include' another file in it. So, only compile one file and another file will be compile too. To show this, please create another file, named "content.js"

document.write("hello from content");

And change the code "entry.js" into this;

require('./content.js');

Compile;

$ webpack ./entry.js bundle.js

 

7. If you fire the application, you should see "hello from content"

 

 

 

 

 

 

 

 

 


Share: