webpack基本使用-打包js/json

项目目录：

build #打包之后的文件存储

​ index.js

​ index.html

src # 源文件

​ index.js

​ index.html

假设设定：/src/index.js为webpack入口起点文件

1. 运行命令

   • 开发环境

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

     webpack会以 ./src/index.js作为入口文件开始打包，打包后输出到 ./build目录下，整体打包环境是开发环境

     结果：

     [webpack-cli] Compilation finished

     #asset表示打包生成的资源名称为main.js 大小有 895 bytes 属于main Chunk,Chunk名称为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

   • 生成环境

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

     参数以及输出与开发环境一致

2. 总结：

   • webpack只能处理js/json资源，不能处理css/img等其他资源，其他资源的处理需要借助于loader,Plugins
   • 生产环境和开发环境将es6模块化编译成浏览器能识别的模块化
   • 生产环境与开发环境不同在于多一个压缩js代码的过程。实际打包之后比开发环境代码大小小。