Basic use of webpack-package js/json

Project directory:

build #File storage after packaging

​ index.js

​ index.html

src # source file

​ index.js

​ index.html

Assumed setting: /src/index.jsstarting point file for webpack entry

1. Run command

   • Development environment

     webpack ./src/index.js -o ./build --mode=development
     

     webpack will be ./src/index.jsas an entry document to start packing, after packing the output ./builddirectory, the overall environment is the development environment package

     result:

     [webpack-cli] Compilation finished

     #asset indicates that the packaged resource name is main.js with a size of 895 bytes and belongs to the main Chunk, and the Chunk name is main

     asset main.js 895 bytes [emitted] (name: main)
     ./src/index.js 59 bytes [built] [code generated] # 打包源文件为./src/index.js
     webpack 5.4.0 compiled successfully in 85 ms

   • Build environment

     webpack ./src/index.js -o ./build --mode=production
     

     The parameters and output are consistent with the development environment

2. to sum up:

   • Webpack can only process js/json resources, but cannot process other resources such as css/img. The processing of other resources requires the help of loader and Plugins.
   • The production environment and development environment compile es6 modularity into modularity that the browser can recognize
   • The difference between the production environment and the development environment lies in the process of compressing js code. The actual package size is smaller than the code size of the development environment.