Webpack 入门，如何打包

Webpack篇章1

1.1理解什么是webpack？

1）简单的来说 webpack就是一个打包工具，把一些乱七八糟的文件，打包成一个文件，减少http请求次数

1.2webpack 5个概念

概念	理解
Entry	入口，指示从那个文件开始打包，分析内部依赖
Output	输出，指示输出文件到哪里取，以及如何命名
Loader	可以简单的理解为翻译，放loader的用来处理非js文件
Plugins	插件，执行范围更广的任务，如打包，压缩等等
Mode	development：开发模式------productin:生产模式

1.3 安装webpack

1）全局安装webpack（指令操作、不过官网以明确声明，不推荐全局安装webpack）

npm i webpack webpack-cli -g

2）安装webpack到项目中

npm i webpack webpack-cli -D 

//-D是开发依赖 -S是项目依赖
开发依赖：项目开发时用的插件
项目依赖：项目开发、上线都要用的插件

3）创建对应文件夹src(index.js)、dist(main.js)

4）书写运行指令进行打包

（全局安装webpack并配置环境变量后打包）
开发环境:

webpack ./src/index.js -o ./dist/main.js --mode=development

生产环境:

webpack ./src/index.js -o ./dist/main.js --mode=production

（项目安装打包）

在终端运行 npm run main 即可进行打包