介绍：webpack 是静态模块打包器
把各种模块（文件）统一处理，打包为一个bundle静态文件
打包的方式：从入口开始，通过递归形式把各个文件的依赖模块整理打包为bundle
概念：
1.模式（mode） production  development  （区别在于压不压缩 不同模式有不同的默认配置）
2.入口（entry）
3.出口（output）
4.模块加载器（loader） (webpack默认只能打包js, 别的如图片，css等需要用loader来帮忙处理)
5.插件（plugins） 除了JS CSS 图片等文件打包，还需要压缩。删除。合并等操作就需要交给插件完成

1.模式（mode）
module.exports = {
  mode: 'production'
};

1.把一个文件夹变为目录文件夹 需要有一个package.json文件

npm init -y

2. 安装webpack webpack-cli

npm i -D webpack webpack-cli

3. 配置打包命令

在 package.json 中增加script脚本命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
 },
 运行  npm run build
 默认 入口是  src 下面的 index.js   (这些需要自己手动创建)
      出口是 dist 下面的 main.js    (自动生成)

5. 项目的html入口文件是在 public 下面的 index.html (自己手动创建)

vue 项目 也是这样的目录

• 不想自己手动打包？ npm i -D webpack-dev-server (修改之后 自动打包生成 bundle.js)
• 不想手动引入？ npm i -D html-webpack-plugin (页面自动引入 打包的bundle.js)
• 自动清除以前的bundle.js? （一般不用） npm i -D clean-webpack-plugin@1.0.1 (自动清除以前的bundle.js)