初始化

  1. npm init

下载相关的包

  1. npm i webpack webpack-cli -g
  2. npm i webpack webpack-cli -D

新建目录

image.png

  1. index.js webpack入口文件
  2. 运行命令：入口文件打包
  3. 开发环境：webpack ./src/index.js -o ./build --mode=development
  4. (ebpack会以./src/index.js为入口文件开始打包，打包后输入到./build/built.js)
  5. 生产环境：webpack ./src/index.js -o ./build --mode=production
  1. build/main.js 打包好的js文件，可以在html中引入使用
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11.     <script src="./main.js"></script>
  12. </body>
  13. </html>

结论

  1. 1.webpack能处理js/json资源，不能处理css/img等其他资源
  2. 2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
  3. 3.生产环境比开发环境多一个压缩的js代码