As in the previous section, we need to manually input the source file name and output file name every time we package the file, which can be troublesome. To solve this problem, we can use the configuration file to manage.

In this section we’ll look at the Webpack configuration file, webpack.config.js. Since a Webpack configuration file is a JavaScript file that exports an object, there are few Webpack configurations that look exactly the same.

Since the Webpack configuration is a standard Node.js module, you can do the following in the configuration file:

  • throughrequire()Import other files.
  • throughrequire()usenpmThe utility function.
  • useJavaScriptControl flow expressions, for example? :Operators.
  • Use constants or variables for common values.
  • Write and execute functions to generate part of the configuration.

Create the webpack.config.js configuration file

When Webpack executes the packaging command, in addition to passing in parameters on the command line, such as the Webpack entry file path and the output file path. This can also be done through the specified configuration file. By default, the webpack.config.js file in the project is searched, which is a Node.js module and returns a JSON configuration object, or the configuration file is specified with the –config option.

Typically, the webpack.config.js file is placed at the root of the project. For example, we create a webpack.config.js file in the xkd_webpack project root to configure the processing entry file and the output file.

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

All we need to do is execute the webpack command from the command line and start packing files automatically.

After executing the webpack command, the following content appears to indicate that the file was successfully packaged:

As you can see, the execution of the webpack command is the same as the execution of the webpack index.js-o bundle.js command from the previous section, but obviously the execution of the webpack command is much more convenient.

Another problem with this is that we need to re-execute the webpack command every time we change the source file, so we can automatically detect the file changes and repackage them by adding the watch attribute to the configuration file.

Example:

Change the configuration file to the following so that it will automatically be repackaged every time we modify the source file:

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 startupwebpackMethods.
  • webpack -w: providewatchMethod for real-time packaging updates.
  • webpack -p: Compression of the packaged file, providedproduction.
  • webpack -d: providesource map, convenient debugging.

model

Webpack4.0 can set mode, by setting the value of mode, you can easily set the packaging environment, can be:

options describe
development Development mode, throughDefinePluginThe plugin willprocess.env.NODE_ENVThe value of the setdevelopment. To enable theNamedChunksPlugin 和 NamedModulesPlugin
production Production mode, default value. throughDefinePluginThe plugin willprocess.env.NODE_ENV The value of the setproduction. To enable theFlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin 和 TerserPlugin
none through DefinePluginThe plugin willprocess.env.NODE_ENVThe value of the setnode. Use the default optimizer

If you set the value to Development, you will get the best development phase experience. This is thanks to Webpack’s features for development patterns:

  • Browser debugging tools.
  • Comments, detailed error logs and hints during development.
  • Quick and optimized incremental build mechanism.

If the value is set to production, Webpack will focus on the deployment of the project:

  • Turn on all the optimization code.
  • smallerbundleSize.
  • Remove code that runs only during development.
  • Scope hoisting 和 Tree-shaking 。

Set 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 typing the webpack command directly to perform file packaging, we can also customize the packaging command. For example, we can use NPM to boot a task and configure it to use a simple NPM run command instead of these tedious commands.

It’s as simple as making some changes to the script part of NPM in the package.json file, for example:

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

This specifies the file to be executed with the –config parameter plus webpack.config.js. To package the file, simply execute the NPM run build command. Npm run test is an example of a test command that can be used to run test.