Basic configuration of webpack (1)

Time:2021-1-25

Initialize node project

Execute command:yarn init -yAnd generate package.json file

Download webpack

Execute command:yarn add webpack webpack-cli --dev

Create SRC folder in the project root directory

The directory structure is as follows:
Basic configuration of webpack (1)

The file content is shown in the figure
Basic configuration of webpack (1)
Basic configuration of webpack (1)
Basic configuration of webpack (1)

Note: webpack supports the import and export of AMD, CMD, commonjs and ES6 modules by default.

Webpack command

It is necessary to execute the webpack command directly on the terminalGlobal command

In the project root directory, execute.\node_modules\.bin\webpackIt’s ordersLocal command;
Or inpackage.json Scripts property ofThe same is true of the webpack command configured inLocal command

As shown in the figure:
Basic configuration of webpack (1)

Using the webpack command

Execute on the terminal_ modules.bin \Webpack or yarn build command

By default, webpack will be found in the root directory of the projectweboack.config.jsDocuments,
No, weboack.config.js File will be directly Src/ index.js AsImport fileMake a package.

output file

After executing the command, the dist directory will be generated under the project root directory
Basic configuration of webpack (1)

Use makefile

Create in SRC directory idnex.html File, and reference the generated file
Basic configuration of webpack (1)

After publishing the page, view the running results
Basic configuration of webpack (1)