webpack
webpack是一个前端构建工具，前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说，开发环境的代码是为了更好的阅读，而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如，开发环境的代码，要通过混淆压缩后才能放在线上运行，这样代码体积更小，而且对代码执行也不会有任何影响。一般需要构建工具处理的几种情况：
代码压缩
将JS、CSS代码混淆压缩，让代码体积更小，加载更快编译语法
编写CSS时使用Less、Sass，编写JS时使用ES6、TypeScript等，这些标准目前都无法被浏览器兼容，因此需要构建工具编译，例如使用Babel编译ES6语法。处理模块化：
CSS和JS的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用webpack、Rollup等处理JS模块化。
基础使用
- 全局安装webpack和webpack-cli
sudo npm install -g webpack
sudo npm install -g webpack-cli
- 创建项目目录并初始化，一路回车默认，之后就会在该目录下出现一个package.json文件。
npm init
package.json
{
"name": "testwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
- 安装webpack和webpack-cli:需要把它安装到devDependencies,运行：
npm install --save-dev webpack
npm install --save-dev webpack-cli
看package.json中，devDependencies中有了webpack
{
"name": "testwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.52.1",
"webpack-cli": "^4.8.0"
}
}
npm install --save (npm install -s)和npm install --save-dev( npm install -d)的区别：
--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下。dependencies是发布后依赖的，devDependencies是开发时的依赖。
- 在该目录下创建src文件夹，其中一个是入口文件app.js，一个是真正写页面的work.js。入口文件用来引入真正写页面的JS文件、CSS文件。
4.1 work.js内容：
document.write('hello,webpack')
4.2 app.js内容：
var dt = require('./work.js')
4.3 新建index.html文件（该文件和src属于同一层级），内容是：
test
test
- 执行命令，打包成功后，就会在项目目录下多出一个dist文件夹，里面有个main.js，index.html中