This is the 4th day of my participation in the August More Text Challenge, for more details: August more Text Challenge!

What is Webpack?

  • A front-end resource building tool, a nodule bundle
  • Front-end all resource files (JS /json/ CSS /img…) Will be treated as modules
  • It will carry out static analysis according to module dependencies and generate corresponding static resources (bundles) by packaging.

Why webpack?

Many web pages today can be thought of as feature-rich applications with complex JavaScript code and a lot of dependency packages. Many good practices have emerged in the front-end community to simplify development. Eg:

  • Modularity allows us to break down complex programs into smaller files.
  • Development languages such as TypeScript, which are extensions of JavaScript, allow us to implement features that cannot be used directly in current versions of JavaScript, and then be installed as JavaScript files for browsers to recognize.
  • CSS preprocessors such as SCSS and LESS

.

These improvements made development much more efficient, but files developed with them often required additional processing to be recognized by the browser, and manual processing was cumbersome, which provided the need for webPack-like tools

Webpack composition

  1. Entry (Entry function)
  • The entry point indicates which module WebPack should use as a starting point for building its internal dependency diagram
  1. Output (Output function)
  • The Output attribute tells WebPack where to export the bundles it creates and how to name these files. The default is./dist
  1. loader
  • Loader enables Webpack to handle non-javascript files (WebPack itself only understands JavaScript). Loader can convert all types of files into valid modules that WebPack can handle, and then you can take advantage of WebPack’s packaging capabilities to process them
webpack.config.js

const path = require('path');

const config = {

  output: {

    filename: 'my-first-webpack.bundle.js'

  },

  module: {

    rules: [

      { test: /\.txt$/, use: 'raw-loader' }

    ]

  }

};

module.exports = config;

Copy the code
  1. plugins
  • Loaders are used to transform certain types of modules, while plug-ins can be used to perform a wider range of tasks. Plug-ins range from packaging optimization and compression to redefining variables in the environment. Plug-in interfaces are extremely powerful and can be used to handle a wide variety of tasks
webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); // install const webpack = require('webpack') via NPM; Const config = {module: {rules: [{test: /\.txt$/, use: 'raw-loader'}]}, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config;Copy the code
  1. Mode
  • Mode instructs Webpack to use the configuration of the corresponding Mode, and there are only two modes, development and Production

Webpack hot update

Hot Update is also called Hot Module Replacement (HMR for short). Based on devServer, the production environment does not need devServer, so the HMR function cannot be used in the production environment

Function: Optimize the packaging and construction speed. If a module changes, only this module will be repackaged (instead of all modules), which greatly improves the construction speed

Style files: You can use the HMR functionality because style-loader is implemented internally

JS file: no HMR function by default, need to modify JS code, add support for HMR function. Entry files do not have HMR functionality and can only handle non-entry JS files

HTML files: No HMR function by default, and the HTML files cannot be hot updated (i.e. no response to changes).

Solution:

Modify the entry entry to import the HTML file

entry:['./src/js/index.js','./src/index.html']
Copy the code

There is no need to do HMR because there is only one HTML file

What are the common loaders? What problems do they solve?

  1. Css-loader: Turns CSS files into CommonJS modules and loads them with style strings
  2. Style-loader: creates a style tag, inserts the js style resource into the head to take effect
  3. Url-loader: Base64 injects the contents of a file into code if the file is too small
  4. File-loader: Package other resources (except CSS/JS/HTML resources)
  5. Html-loader: processes img in HTML files
  6. Babel-loader: Convert ES6 to ES5
  7. Eslint-loader: Checks JavaScript code through ESLint

What are the common plugins? What problems do they solve?

  1. Html-webpack-plugin: Can copy a structured HTML file and automatically import all the resources packaged output (JS/CSS)
  2. Clean-webpack-plugin: Repackaging automatically empties the dist directory
  3. Mini-css-extract-plugin: Extract CSS from JS into a separate file
  4. Optimize – CSS -assets-webpack-plugin: compressed CSS
  5. Uglifyjs-webpack-plugin: Compressed JS
  6. Commons-chunk-plugin: Extract common code

The webPack build process

  1. Initialization parameters: read and merge parameters from configuration files and Shell statements to get the final parameters;
  2. Start compiling: initialize the Compiler object using the parameters obtained in the previous step, load all the configured plug-ins, and execute the object’s run method to start compiling.
  3. Determine entry: find all entry files according to the entry in the configuration;
  4. Module compilation: Starting from the entry file, call all configured Loader to translate the module, find out the module that the module depends on, and then recurse this step until all the entry dependent files have gone through this step;
  5. Complete module compilation: After using Loader to translate all modules in step 4, obtain the final content of each module after translation and the dependencies between them;
  6. Output resources: assemble chunks containing multiple modules one by one according to the dependency between the entry and modules, and then convert each Chunk into a separate file and add it to the output list. This step is the last chance to modify the output content.
  7. Output complete: After determining the output content, determine the output path and file name based on the configuration, and write the file content to the file system