webpack configuration file

As in the previous section, we need to manually enter the source file name and output file name every time we pack a file. This will be more troublesome. To solve this problem, we can use the configuration file to manage it.

In this section, we will learn webpack the configuration file webpack.config.js . Since the webpack configuration file is a JavaScript file that exports an object, there are very few webpack configurations that look exactly the same.

Because the webpack configuration is a standard Node.js module, the following operations can be performed in the configuration file:

• Import other files through require()
• Use npm tool functions through require()
• Use JavaScript control flow expressions, such as the ?: operator.
• Use constants or variables for common values.
• Write and execute functions to generate part of the configuration.

Create webpack.config.js configuration file

webpack When executing the packaging command, in addition to passing parameters in the command line, such as webpack entry file path output file path. It can also be executed through a specified configuration file. webpack.config.js file in the project will be searched. This file is a Node.js module and returns a configuration information object in json format, or the configuration file can be specified --config

Usually the webpack.config.js file is placed in the root directory of the project. For example, we webpack.config.js file in the root directory of the xkd_webpack project, and configure the processing entry file and output file in this file.

Example:

module.exports = {
    entry:'./index.js',
    output:{
        path:__dirname,
        filename:'./bundle.js'
    },
    mode: 'development'
}

In this way, we only need to execute the webpack command on the command line, and the file will be automatically packaged.

After executing the webpack command, the content shown in the following figure appears, indicating that the file has been packaged successfully:

It can be seen perform webpack command operating results and on one of webpack index.js -o bundle.js the results of running the command is the same, but it is clear that the implementation of webpack command a lot easier.

There is another problem, that is, we need to re-execute the webpack command every time we modify the source file, so we can automatically detect the file change and repackage watch

Example:

Modify the configuration file to the following content, so that every time we modify the source file, it will automatically repackage:

module.exports = {
    entry:'./index.js',
    output:{
        path:__dirname,
        filename:'./bundle.js'
    },
    mode: 'development',
    watch: true
}

Here are a few basic webpack commands:

• webpack : The most basic method webpack
• webpack -w : Provides the watch method to package and update in real time.
• webpack -p : Compress the packaged files and provide production .
• webpack -d : Provide source map , which is convenient for debugging.

mode

webpack4.0 can set mode . By setting mode , you can easily set the packaging environment. The possible values are:

Options	description
development	Development model, by DefinePlugin plug- process.env.NODE_ENV value is set development . Enable NamedChunksPlugin and NamedModulesPlugin
production	Production mode, the default value. process.env.NODE_ENV the value of production to 060e7210e97ffe through the DefinePlugin plug-in. Enable FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin and TerserPlugin
none	process.env.NODE_ENV the value of node to 060e7210e98034 through the DefinePlugin plug-in. Use default optimization

If you set the value to development , you will get the best development experience. This is due to webpack for development mode:

• Browser debugging tool.
• Notes, detailed error logs and tips during the development phase.
• Fast and optimized incremental build mechanism.

If you set the value to production , webpack will focus on the deployment of the project:

• Turn on all optimized codes.
• The smaller bundle size.
• Remove code that only runs during the development phase.
• Scope hoisting and Tree-shaking .

mode in the configuration file:

module.exports = {
  mode: 'development'
};

Or you can pass it as a CLI parameter:

webpack --mode=development

Custom packaging commands

In addition to directly entering the webpack command to execute file packaging, we can also customize the packaging command. For example, we can use npm to guide task execution, and after configuring it, we can use simple npm run commands to replace these cumbersome commands.

In fact, it is very simple. You only need to make some modifications to the script part npm package.json file, for example:

"scripts": {
    "build": "webpack --config webpack.config.js" 
}

In this way, the --config parameter plus webpack.config.js used to specify the file to be executed. At this time, to package the file, you only need to execute the npm run build command. Among them, build is defined by ourselves. In addition to build we can also use other names. For example test , the npm run test command is executed.