Welcome to wechat public account: Front Reading Room

Essentially, WebPack is a static module packaging tool for modern JavaScript applications. When WebPack works with an application, it internally builds a dependency graph that maps to each module required for the project and generates one or more bundles.

Starting with V4.0.0, WebPack no longer has to introduce a configuration file to package a project, however, it is still highly configurable and works well for your needs.

You need to understand some core concepts before you start:

  • The entrance (entry)
  • Output (output)
  • loader
  • Plug-in (plugins)
  • Mode (mode)
  • Browser Compatibility
  • Environment (environment)

The entrance (entry)

The entry point indicates which module webPack should use as a starting point for building its internal dependency Graph. Once at the entry point, WebPack finds out which modules and libraries are (directly and indirectly) dependent on the entry point.

The default is./ SRC /index.js, but you can specify one (or more) different entry starting points by configuring the Entry property in webpack Configuration. Such as:

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'};Copy the code

Output (output)

The Output attribute tells WebPack where to export the bundles it creates and how to name those files. The default value for the main output file is./dist/main.js, and the other generated files are placed in the./dist folder by default.

You can configure these processes by specifying an output field in the configuration:

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js'.output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',}};Copy the code

In the example above, we use the output.filename and output.path attributes to tell the name of the Webpack bundle and where we want the bundle to emit. In case you’re wondering what the path module imported at the top of the code is, it’s a Node.js core module that manipulates file paths.

loader

Webpack can only understand JavaScript and JSON files, which is a built-in capability of WebPack available out of the box. Loader enables WebPack to process other types of files and convert them into valid modules for use by applications and to be added to dependency diagrams.

Note that loader can import any type of module (such as.css files), which is unique to WebPack and may not be supported by other packers or task executors. We think this language extension is necessary because it allows developers to create more accurate dependency diagrams.

At a higher level, in the webpack configuration, loader has two properties:

  • The test property identifies which files will be converted.
  • The use attribute defines which loader should be used during conversion.

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',},module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader'}],}};Copy the code

In the above configuration, the rules property is defined for a single Module object, which contains two required properties: test and use. This tells the Webpack compiler the following:

“Hey Webpack compiler, when you encounter a” path that is resolved to ‘.txt’ in the require()/import statement “, use the raw-loader conversion before you package it.

It is important to remember that when defining rules in a Webpack configuration, you define them in module.rules, not rules. For your understanding, WebPack warns you if you don’t do it the right way.

Remember, when using regular expressions to match a file, you don’t want to put quotes around it. That is, /.txt/ is not the same as ‘/\.txt/’ or ‘/.txt$/”. The former instructs WebPack to match any file ending in.txt, the latter instructs WebPack to match a single file with an absolute path ‘.txt’; This may not be what you intended.

Plug-in (plugins)

Loaders are used to transform certain types of modules, while plug-ins can be used to perform a wider range of tasks. Including: package optimization, resource management, injection of environment variables.

To use a plugin, you simply require() it and add it to the plugins array. Most plug-ins can be customized with options. You can also use the same plug-in multiple times for different purposes in a configuration file by using the new operator to create an instance of the plug-in.

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // Install via NPM
const webpack = require('webpack'); // Used to access built-in plug-ins

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader'}],},plugins: [new HtmlWebpackPlugin({ template: './src/index.html'})]};Copy the code

In the example above, the htmL-webpack-plugin generates an HTML file for the application and automatically injects all the generated bundles.

Mode (mode)

By selecting one of development, Production, or None to set the mode parameter, you can enable the optimizations built into WebPack for that environment. The default value is production.

module.exports = {
  mode: 'production'};Copy the code

Browser Compatibility

Webpack supports all ES5-compliant browsers (IE8 and below are not supported). The import() and require.ensure() of Webpack require promises. If you want to support older browsers, you also need to load Polyfill before using these expressions.

Environment (environment)

Webpack 5 runs on version 10.13.0+ of Node.js.

Welcome to wechat public account: Front Reading Room