A, general

In Webpack, there are five core concepts, written in webpack.config.js by default, which are:

1, entry

  1. The entry point (entry point) indicates that WebPack should use this module to build its internal dependency diagram (dependency diagram). Upon entering the entry point, WebPack finds modules and libraries that are (directly and indirectly) dependent on the entry point.
  2. The default is./ SRC /index.js, but you can specify one (or more) different entry starting points by configuring the Entry property in the Webpack configuration. Such as:
module.exports = {
  entry: './path/to/my/entry/file.js'
};
Copy the code

2, the output

  1. 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.
  2. To configure these processes by specifying an output field in the configuration:
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. Tips: The Path module is a core Node.js module for manipulating file paths.

3, the loader

  1. 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.
  2. Loader can import any type of module (such as.css files), which is webPack-specific.

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

  1. testProperty to identify which files will be converted.
  2. useProperty that defines which loader should be used during the conversion.
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.

Tips: Remember, when using regular expressions to match files, you don’t want to put quotes around them. That is, /\.txt$/ is not the same as ‘/\.txt$/’ or ‘/\.txt$/ “. The former instructs Webpack to match any file ending in.txt, and the latter instructs WebPack to match a single file with an absolute path of ‘.txt’.

4, the plugin

Loader is used to transform certain types of modules, while plugin 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.

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.

5, mode

Set the mode parameter by selecting one of Development, Production, or None to enable the optimization built into WebPack for the appropriate environment. The default value is production. Or pass it from the CLI parameter: webpack –mode=development

module.exports = {
  mode: 'production'
};
Copy the code
options describe
development willDefinePluginIn theprocess.env.NODE_ENVIs set todevelopmentIs the module andchunkEnable a valid name.
production willDefinePluginIn theprocess.env.NODE_ENVIs set toproduction. For the module andchunkEnable deterministic obfuscated names,FlagDependencyUsagePlugin.FlagIncludedChunksPlugin.ModuleConcatenationPlugin.NoEmitOnErrorsPlugin 和 TerserPlugin 。
none Do not use any default optimization options

If not, Webpack sets the default value of mode to Production

6,webpack.config.jsPreviewing configuration files

const path = require('path');
module.exports = {
  mode: "production".// "production" | "development" | "none"
  // Default is "production"
  // Select mode tells WebPack to use its built-in optimizations accordingly.
  entry: "./app/entry".// string | object | array
  // The default is./ SRC /index.js
  // Here the application starts executing
  // Webpack starts to pack
  output: {
    // How does WebPack output the resulting options
    path:path.resolve(__dirname, "dist"), // string (default)
    Path. resolve(__dirname, "dist")"
    // The destination path of all output files
    // Must be an absolute path (using the Path module of Node.js)
    filename: "[name].js".// string (default)
    // Default: "main.js"
    // File name template of Entry Chunk
    publicPath: "/assets/".// string
    // Outputs the directory of parsed files, the URL relative to the HTML page
  module: {
    // Module configuration is relevant
    rules: [...]. ,},plugins: [...].Copy the code