The previous article cleaned up the lead-up to building a WebPack project. With these preparations in place, dependencies installed, directories and files set up, you can consider writing a WebPack configuration.

Structure of the WebPack configuration

First, because of the separation between test and production environments, the WebPack configuration needs to be separate from the packaged configuration for test and production environments. However, some parts of the configuration are always the same, so organize the same configuration in the Base configuration file, and then build separate configuration files for the test and production environments. This is where the Webpack-merge plug-in comes in.

webpack-merge

The Webpack-merge plug-in can merge arrays or multiple objects. It’s a deep merge, that is, it’s a deep merge for every element of the array, for every attribute of the object. The principle of merge is to keep the same elements in array, keep the latter when the object attributes are different, and execute the function to get the result before merge. In addition, there will be parameters that include some values in the Webpack configuration, which will be overridden with the latter.

So webpack-Merge is a good fit for merging Webpack configurations. You can configure a base configuration in the base file, then import it into the test and production configuration files, and merge it using webpack-merge. You can also consider incorporating test and production configurations into the base file, combining configurations based on environment variables.

Configuration scheme

The combined configuration scheme selected here is to introduce the configuration of the test environment and production environment into the base file and merge the configuration according to the environment variables. This allows all packages to point to the base configuration file when writing a script command, only distinguished by environment variables. Of course, this choice varies from person to person. Introducing base configuration into test and production environment configuration files may also require environment variables to be written on script commands.

Basic WebPack configuration

Now that the configuration scheme is determined, you need to distinguish between the different packaging environments in the base file. Distinguishing variables ask isDev.

let isDev = env.development;
Copy the code

Env.development is an environment variable passed in through the script command that can be used to differentiate packaging environments. This variable will affect how we treat some of the same configuration properties differently depending on the packaging environment.

Webpack configuration structure

Here’s a quick look at the WebPack configuration structure. The configuration structure described here is not complete and is best described in the official WebPack documentation.

On webpack’s official website, four core concepts are listed, namely Entry, Output, Loader and plugins. In addition, the base file is mainly the configuration of these four parts, so I will also sort out the explanation according to these four aspects.

entry

Entry is used to configure the configuration properties of the packaged entry file. You can use arrays or objects. Using an array indicates that there is more than one entry for packaging, which is better for multi-page entry or packaging a single page plus a vendor file. The use of objects is generally packaged entry only one, this case is more single-page applications. Each entry file can be configured with an entry name, which is used to identify the entry, and an entry path, which is used to execute the entry file.

Here only one entry file is configured:

{
  entry: {
    main: resolve('.. /src/main.js')}},Copy the code

output

Output is the configuration property used to configure the packaged exit. Only one output configuration can be configured, that is, only objects can be used. Objects can have the following attributes:

Filename: This attribute is the name of the configuration packaged file. They can be strings or dynamically generated names (such as [name],[chunk],[hash], etc. The filename will be replaced with the specified filename, chunk value, and hash stamp after packaging).

ChunkFilename: This property is the file name for files that are not imported files but need to be packaged separately. As long as it is named for files packaged using the require.ensure and import asynchronous loading modules.

Path: This property configures the directory path to which the packaged files will be saved. We usually specify it in the dist directory of the root directory.

PublicPath: This property is a prefix to the relative path of the configuration final file. Generally, we can consider putting the packaged file on the CDN after packaging, and we need to bring the corresponding CDN path when referencing. Configuring this property will enable packaged files to be referenced with this prefix automatically.

{
  output: {
    filename: isDev ? '[name].js' : '[name].js? v=[chunkhash]'.chunkFilename: isDev ? '[chunkhash].js' : '[id]-chunk.js? v=[chunkhash]'.path: resolve('.. /dist'),
    publicPath: '/'}},Copy the code

loader

Loader is a very important item in Webpack packaging, but webpack can achieve the core part of the configuration of project packaging. Loader is a package plug-in. We use a series of package plug-ins to transform the corresponding source code of the project. It can handle JavaScript code, CSS code, file type files and so on introduced in the project through various ways.

Configuring the Loader is also not difficult. Generally, loader needs to be installed first and then configured in the Module property of Webpack configuration. Webpack provides the rules property for configuration. The rules property needs to be configured using an array because we often need to package and convert many different code modules.

{
  module: {
    rules: [{test: /\.vue$/.use: 'vue-loader'}}}]Copy the code

Each item in the array is an object with two basic attributes: test is used to match the corresponding module, usually a file name. The matching file name can be a String, a re, and so on. Use is used to specify the loader to package the compiled transformation. If only one loader is used, write only the loader name. If multiple Loaders are used, use an array to list loaders. Each element of the array can be a String or a JSON format (some Loaders support configuration attributes). Loaders in an array are executed from right to left.

Here is not a detailed sorting of some loader usage, later sorted separately.

plugins

Plugins are used to configure the list of plug-ins used in the WebPack packaging process. These plugins allow you to customize the WebPack packaging process. For example, the Webpack. DefinePlugin lets you define constants globally on your packaged code project. Vue-loader has a built-in plug-in that is used to configure vue-loader package compilation.

other

Other configuration items such as Resolve,devServer, Mode, and Optimization are explained in a later chapter.

At the end

The next article will detail some loader and plugin introductions.