Article content output source: pull hook big front-end high salary training camp

Module packaging tool

• origin

  • ES Modules has an environment compatibility problem

  • Too many module files and frequent network requests

  • All front-end resources need to be modular

  • Good idea

    • compile

      • Use new features freely during development
      • Maximum compatibility with all browsers in production

    • packaging

      • Pack the scattered files into a single file
      • Resolve the problem of too many frequent resource requests from modules
      • Supports different types of front-end resource types

  • conclusion

    • New feature code compiled

      • By building the system and some compilation tools to achieve

    • Modular JS packaging

      • By building the system and some compilation tools to achieve

    • Supports different types of resource modules

      • Front-end module packaging tools are required

• The profile

  • Webpack

    • The core features meet the requirements described above

    • A Module Bundler

    • For environment-compatible features, you can use the module Loader to compile and transform them

    • Code Splitting

      • The ability to package all the code in the application according to our needs

        • Don’t worry about packing all the files together to create a bulky file.

      • We can package together the modules that are necessary for the first run of the application during load. Other modules can be stored separately and asynchronously loaded when needed. This type of loading is called incremental or progressive loading.

    • For the front-end Module type problem, Webpack allows us to load any type of resource file in JS in a modular way, namely Asset Module.

  • Rollup

  • Parcel

• role

  • Packaging tools address front-end modularity as a whole, not just JS modularity
  • This allows us to enjoy the benefits of modularity in the development phase without having to worry about the impact of modularity on the production environment.

Webpack

– Quick start

- Webpack, as the most mainstream front-end module packer, provides a complete set of front-end project modularization solutions, rather than only limited to JS modularization. Webpack provides a front-end modularization solution that allows us to easily modularize all the resources involved in our front-end projects. - Webpack has an advanced idea. The process of using Webpack in the early days was complicated and the official documents were obscure, so it was not very friendly to us developers at the very beginning. But as versions have been released and official documentation has been updated, Webpack has become so popular that it basically covers the development process for most modern Web projects. - cases-src-heading.js-export default () ⥤ {const element = document.createElement('h2') element.textContent='hello ' World 'element.addeventListener ('click', () ⥤ {alert('Hello webpack')}) return elementCopy the code

}

		- index.js

			- import createHeading from './heading.js'
Copy the code

const heading= createHeading()

document.body.append(heading)

- index.html - <! DOCTYPE html>Copy the code

- Install serve-yarn Global add serve-run serve. - Introduce Webpack handling JS module - Since Webpack is a tool module of NPM, Json file - yarn init --yes - Install Webpack and its CLI plug-in - yarn add Webpack Webpack -cli --dev - yarn Webpack -- version-ok ~ - execute package operation -yarn webpack -ok ~ - wrap webpack command in scripts property of package.json - "scripts": {"build": "webpack"Copy the code

} – Run: yarn build

				- OK~
Copy the code

– Configuration file

- Webpack4 and later support direct packaging with no configuration - the entire packaging process will use SRC /index.js as the packaging entry, Generate main.js file in dist directory - add configuration file webpack.config.js - this file is running in the Node environment JS file, So you need to write your code in CommonJS mode - content-const path = require ('path')Copy the code

Module.exports = {// specify the path to the webpack package, ‘./’ cannot omit entry: ‘./ SRC /main.js’, // set the location of the output file output: {// set the output filename filename: ‘bundle.js’, // specify the output file directory, the relative path cannot be used path: path.join(__dirname,’output’)}} – package: yarn build

			- OK~
Copy the code

– Working mode

- WebPack4 adds a new working mode usage - this usage greatly simplifies the complexity of webpack configuration - can be understood as several preset configurations for different environments - YARN Build - Warning: The mode attribute is not specified, the package will be in production mode - the package code is optimized, Difficult to read - YARN webpack - Mode development - No warning - Package code readable - mode-development - Webpack optimizes packaging speed in this working mode - - Production - This work mode will optimize the code - None - Webpack runs the original package, -const path = require ('path') -const path = require ('path') -const path = require ('path')Copy the code

Module. exports = {mode: ‘development’, // specifies the path to webpack exports. Output: {// Set the name of the output file filename: ‘bundle.js’, // Specify the directory where the output file resides. No relative path path can be used: Path. join(__dirname,’output’)}} – Run: YARN build

– Packaging results run principle

- To better understand the packaged code - set mode to none-const path = require ('path')Copy the code

Module. exports = {mode: ‘none’, // set the path to webpack./ SRC /main.js // set the path to webpack. {// set the output filename filename: ‘bundle.js’, // specify the output file directory, no relative path path: path.join(__dirname,’output’)}}

- packaging: Yarn webpack-dist successfully generated bundle.js file - analyze bundle.js file - Ctrl+K,Ctrl+0 - Collapse all code - the whole generated code is an immediate execution function namely IIFE - this function is the webpack work entry - the argument is modules - the argument is an array, and each element in the array is the same function as the argument list - each function corresponds to the module in our source code - which means that each of our modules is wrapped in a function, To implement the module's private scope - expand the webpack work entry function, analyze the function body inside - 1, define 1 object, used to cache the loaded module object - 2, define a require function, used to load module - 3, Some properties or utility functions are mounted on the require function -m property - used to cache the modules-c property - used to cache the loaded modules -d function - used to define the getter function for the specified object -r function - Defines the __esModule flag for the specified object -t function - creates a pseudo-namespace object -n function - handles compatibility -o function - determines whether the specified object has a given attribute -p attribute - public path prefix - finally calls the custom require function, Passing a 0 to start loading our module - summary - webpack packed code is not particularly complicated. - Just to help us put all modules in the same file - In addition to putting them in the same file, WebPack also provides some basic code to keep our module-to-module dependencies intact.Copy the code