webpack简介与初使用

webpack是前端资源打包工具，它对模块的依赖关系进行分析，然后将模块打包生成静态资源

五个核心概念

1.entry：开始打包的入口起点

2.output：打包后的bundles输出到哪里去，以及如何命名

3.loader：让webpack处理非js文件

4.plugins（插件）：打包优化和压缩

5.mode（模式）：

 

初使用

1.运行指令(npx webpack指令是 5.2.0及以上内置的包执行器，npx webpack --mode development会直接找项目的/node_modules/.bin/里面的命令执行，方便快捷。)

开发环境：webpack ./src/index.js -o ./build/built.js --mode=development

（webpack会以./src/index.js 为入口文件开始打包，打包后输出到./build/built.js)注：webpack5会把built.js当成文件夹，在built.js文件夹下生成main.js

生产环境：webpack ./src/index.js -o ./build/built.js --mode=production(同上)

2.结论

1.webpack能处理js，json资源，而不能处理css，img等其他资源

2.生产环境和开发环境将es6模块化编译成浏览器能识别的模块