Webpackage 5 (5) Modular principle

When webPack your application, you can choose from a variety of module syntax styles, including ES6, CommonJS, and AMD.

See the source code to see how the most common ES Modules, CommonJs, and cross-references are implemented in WebPack

• Set mode and Soucre Map before viewing the source code to make the generated source code easy to read

module.exports = {
  mode: 'development'.devtool: 'source-map'. }Copy the code

CommonJs modularity principle

math.js

const sum = (num1, num2) = > {
  return num1 + num2
}

module.exports = {
  sum
}
Copy the code

main.js

const { sum } = require('./js/math')

console.log(sum(10.10))
Copy the code

npm run build

1. The outermost layer is a self-executing function that lets each file form its own scope to avoid contaminating each other

2. Line 48 is another self-executing function that calls the previously declared __webpack_require__ function and passes in the file path

3. The __webpack_require__ function looks for cached objects first, and the __webpack_modules__ object looks for files that are not cached

4. __webpack_modules__ object

The path of the original file is the key, and the contents of the original file are the value and arefunction. This is the core code for modularity, making each module a separate scope.

ES6 modularity principle

Anonymous export

format.js

const getDay = (date) = > {
  return date.getDay()
}

export default getDay 
Copy the code

main.js

import getDay from './js/format.js'

console.log(getDay(new Date()))
Copy the code

npm run build

1. The first self-executing function defines a property for the webpack_require function__webpack_require__.r
   • If Symbol is supported, custom labels for parameters are explained at the end of the reference
   • Sets properties for the parameter__esModulefortrueIs used to distinguish between ES6 modularity

2. The previous step is called first__webpack_require__.rAnd then call__webpack_require__Function to pass in the file path

3. Basically the same as commonJs, the difference is that the original JS code eventually existsmodule.exports.defaultOn the properties

To be exported

format.js

export const getDay = (date) = > {
  return date.getDay()
}
Copy the code

main.js

import { getDay } from './js/format.js'

console.log(getDay(new Date()))
Copy the code

npm run build

1. The o function determines whether an object contains an attribute, and the d function adds attributes to module.exports. Here we define only get interception, not set. So unlike CommonJS you can change variables in a module after you get an imported module

ES6 import CommonJs compatibility processing

ES6 is different from CommonJs

• CommonJs saves exported variables through objects, so they can be changed
• ES6import { sum } from './math'The curly braces here deconstruct module.exports, where each property is only listened for by GET and cannot be modified. Import anonymous modules without {} and look for module.exports.default

format.js

export const getDay = (date) = > {
  return date.getDay()
}
Copy the code

main.js

import getDay from './js/format.js'

console.log(getDay(new Date()))
Copy the code

npm run build

ES6 import module does not use curly braces {}, the imported module as an anonymous export to find the default attribute

note

1. ! function(){}()The third way to write a self-executing function is to use the operator to tell the JS engine that this is an expression that can be called directly
2. Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); // '[object Module]'Sets a custom type label for an objectRefer to the link