This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact

Without a preamble, how to configure WebPack

Configuring webpack is mainly to configure export files and import files:

/ / webpack. Config. Js file
module.exports = {
  entry:'./a.js';// Import file
  output:{
    filename:"pack.js".path:__dirname,// the __dirname special variable represents the current directory}}Copy the code

But sometimes the business logic is complex and there may be more than one page on a page. When we have many pages, and each page has the same dependencies, different JS controls different business logic on each page.

//page one
<body>
    <script src=".. /js/base.js"></script>
    <script src=".. /js/home.js"></script>
</body>

//page two
<body>
    <script src=".. /js/base.js"></script>
    <script src=".. /js/sighup.js"></script>
</body>
Copy the code

How to do webpack:

/ / webpack. Config. Js file
module.exports= {
    entry: {home:'./js/home.js'.signup:'./js/signup.js',},output: {filename:'[name].bundle.js'.path:__dirname + '/dist'.//}}Copy the code

Note: [name] is the name of the corresponding entry, which is either home.bundle.js or signup.bundle.js.

__dirname indicates the current directory,

Dis stands for distributable, the dist directory that often houses packaged, compressed code.

//base.js
var open = true;

module.exports = {
    open:open,
}

//home.js
var base = require('./base.js');
var open = base.open;
if(open){// Russo is open for registration
    document.body.innerHTML = ' Register '
}

//signup.js
var base = require('./base.js');
var open = base.open;
if(open){
    document.body.innerHTML=` < h1 > welcome! `;
}else{
    document.body.innerHTML='< H1 > registration is temporarily closed 
      ';
}
Copy the code

These are the dependency files.

It is then packaged by command

npm run pack // Pack is for each input command to avoid too long, we custom command.
Copy the code

After execution is complete, there will be a dist directory with our packed JS files: home.bundle.js and signup.boundle.js.

With these two JS files, file import is only suitable for importing packaged JS

//page one ---index.html
<body>
    <script src=".. /dist/home.bundle.js"></script>
</body>

//page two----signup.html
<body>
    <script src=".. /dist/signup.bundle.js"></script>
</body>
Copy the code

In a multi-page application like this, we give each page a packaged address file, the entry file for each page, and the dependencies that we use, we don’t really have to worry about, we leave it all to WebPack and let it do that.

Another, we share some data between modules, we can use ES6 syntax;

//base.js
var open = true;
export{open};

//home.js
import {open} from './base';// It can be directly destructed
if(open){// Russo is open for registration
    document.body.innerHTML = ' Register '
}

//signup.js
import {open} from './base';// It can be directly destructed

if(open){
    document.body.innerHTML=` < h1 > welcome! `;
}else{
    document.body.innerHTML='< H1 > registration is temporarily closed 
      '
}
Copy the code

It’s much simpler. Most importantly, WebPack supports this writing right out of the box

That’s about configuring the entry and exit of WebPack