Project directory:
build #File storage after packaging
index.js
index.html
src # source file
index.js
index.html
Assumed setting: /src/index.js
starting point file for webpack entry
-
Run command
-
Development environment
webpack ./src/index.js -o ./build --mode=development
webpack will be
./src/index.js
as an entry document to start packing, after packing the output./build
directory, the overall environment is the development environment packageresult:
[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
-
-
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.