Front-end and mobile development-webpack-webpack configuration file

webpack

aims:

• Learn to use webpack configuration files
• Will specify the packaging mode and understand the difference between the two packaging methods
• Will specify entrance and export documents
• Will set up devtool

The zero configuration function provided by webpack is very weak and cannot be customized, so it also provides a configuration file that allows us to customize the function (recommended method).

Create and use the configuration file to set the packaging file

aims:

• Understand zero configuration

• Know the configuration file

• Can configure the packaging method

• Understand the difference between development and production modes

Zero configuration and configuration files

When webpack is working, it will find a webpack.config.jsfile named in the root directory by default (if not found, it will use some default settings to support its zero configuration feature.) This file named webpack.config.js It is the configuration file of webpack. In this configuration file, we can flexibly configure it as needed to make the overall packaging more flexible.

webpack.config.js

This configuration file is itself a js file that conforms to the node.js module specification, and its function is to set the conditions and constraints that webpack will use when packaging the project.

The basic format is:

module.exports = {
    
    
	配置项名1： 配置项值1，
	配置项名2： 配置项值2
}

The name and corresponding value of each configuration item has a specific meaning and cannot be changed at will.

Basic settings-packaging mode

The mode item in webpack.config.js is used to set the packaging method, if not set, it will default to production. Reference official website

webpack provides two attribute values ​​for the mode item:

• development: development mode. The code (dist/main.js) generated at this time is still readable and large in size, so the packaged code is suitable for development.

• production: Production mode. It will automatically enable some optimization measures within webpack, such as compression, obfuscation, encryption... In short, it makes the code unreadable and irreversible.

See the actual operation:

Create a webpack.config.js in the root directory and write the following:

/**
 1. 要放在项目的根目录下。
 2. 在npx webpack打包时，会自动去找这个文件，并运行其中的
    代码。如果找不到，则进入零配置模式 ---- 采用一些默认配置。
*/
console.log('打包文件....')
module.exports = {
    
    
  mode: "development"
}

Then, run the packaging command again npx webpack, you will find that console.log('打包文件....')it will be executed, and at the same time, a new main.js will be created again in the dist directory.

Configure packaging entry

There is a very important concept: entry file (which file webpack should start analyzing and packaging)

In webpack:

• The default entry is: ./src/index.js

• The default export is: ./dist/main.js.

When you have not written any configuration files (or have not modified the entry settings in the configuration file), webpack will directly find index.js under src and put the packaged code under dist/main.js.

What is an entry file

Tell webpack which file to start analyzing and packaging.

How to customize the entry file

The default entry file location in webpack is: src/index.js

If in actual development, hope:

• This entry file is not index.js, but main.js
• The overall js file is not placed in the src directory, but under src/js.

Solution: Reconfigure the entrance as required.

Step 1: Adjust the directory structure to simulate the above requirements. Adjust the directory structure as follows:

|-package.json
|-index.html
|-src/
|-src/js
|-------main.js
|-------tool.js

Create a new directory js, and change index.js to main.js

Step 2: Modify configuration items

Modify the configuration items webpack.config.js of entryitems

module.exports = {
  mode: 'development', // 打包方式
  entry:'./src/js/main.js' // 入口文件
}

Step 3: Repack and test.

Configure package export

What is an export document

After packaging the source files, where should they be placed? This file is the export file, the default value is dist/main.js

How to configure package export

The default value of webpack: the default value dist/main.js

Requirements: Put the export file in bundle.js under the build directory

Solution: Set the output item in webpackage.js.

// 引入nodejs中的核心模块
const path = require('path') 
console.log(path.join(__dirname,'/build'))
module.exports = {
    
    
  mode: "production",
  entry: './src/js/main.js', // 入口文件
  output: {
    
    
     "path": path.join(__dirname,'/build'), // 决定出口文件在哪里
     "filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
  }
}

Description:

• The filename in output is used to specify the name of the packaged file.
• The path in the output is used to specify the packaged path. Note: It must be an absolute path . Therefore, the join and __dirname in the path module are referenced here to generate an absolute path.
• If the path in path does not exist, it will be created automatically .

Configure devtool

Import

The target file generated by webpack packaging is the target file. If the target file is wrong, we want to debug it to find out which file is the error?

Example

In order to solve this problem, we need to learn devtool configuration items.

devtool

This option controls whether to generate and how to generate the source map. The source map is used to map the relationship between the source code before packaging and the target file after packaging, so that we can debug (when the code has an error, we can find out which source code the error is in).

module.exports ={
    
    
   devtool: 'source-map',
   mode: 'development'
}

devtool has more than 20 values ​​to choose from, each option has a different meaning, for example:

• "Source-map": Generate the mapping relationship in a separate map file.

• "Inline-source-map": save the mapping relationship in the package file

Suggest:

• Can be set in the production phase: cheap-module-source-map

• Can be set during the development phase: cheap-module-eval-source-map

summary

• The default name of webpack configuration file iswebpack.config.js

• Learning webpack is mainly to learn the use of webpack.config.js .

• Customize: entry, output, mode, devtool

If there are any shortcomings, please advise, to
be continued, continue to update!
Make progress together!