一，介绍

???webpack是一个前端构建工具。
???前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说，开发环境的代码是为了更好的阅读，而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如，开发环境的代码，要通过混淆压缩后才能放在线上运行，这样代码体积更小，而且对代码执行也不会有任何影响。一般需要构建工具处理的几种情况：
???代码压缩
???编译语法
???处理模块化：
???其他的构建工具：
在这里插入图片描述

二，安装配置

webpack官网：https://webpack.docschina.org/
步骤：
npm i webpack webpack-cli --save-dev

npm
npm i xxx --save
npm i xxx --save-dev
–save 会把依赖包名称添加到 package.json 文件 dependencies 键下
–save-dev 则添加到 package.json 文件 devDependencies 键下
dependencies是运行时的依赖
devDependencies是开发时的依赖
Yarn
yarn add jquery // 表示通过“运行依赖”方式安装jquery后边没有参数，运行依赖也有参数，为–save 简称为 -S，但是可以不用设置
yarn add webpack -D // webpack后边有-D参数，表示通过“开发依赖”方式安装开发依赖参数为 --save-dev简称为 -D

为什么要设置-D参数呢?
项目开发完毕可能会上传到网络(例如github)，也有可能给朋友分享，无论哪种方式我们代码分享出去是不带node_modules目录的，所以我只需要拿到package.json安装依赖就行。

三，案例

在根目录下创建src文件夹，其中一个是入口文件app.js，一个是写内容的work.js。入口文件用来引入真正写页面的JS文件、CSS文件。
work.js内容：

document.write('铁蛋儿真帅')

app.js内容：

let dt = require('./work.js')

然后，再返回上一层目录，新建index.html文件（该文件和src属于同一层级），内容是：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div>test</div>
<script src='./dist/main.js'></script>
</body>
</html>

在命令行中执行：

webpack app.js

四，配置打包模式

给webpack配置打包模式，不配置打包会提示黄色
步骤：

项目根目录创建webpack配置文件，名称为 webpack.config.js
给webpack.config.js做如下配置

production：生产模式，打包的文件是优化压缩的
development：开发模式，打包的文件有适当的回车、空白、注释
前期使用development，项目开发完毕即将上线就用production

五，配置入口和出口文件

项目主模板文件：index.html
项目主入口文件：src/app.js
项目出口文件：dist/main.js
现在我们要对入口和出口文件做配置
入口：src/app.js
出口：dist/main.js

步骤：

配置快速启动项package.json

"scripts": {
"build": "webpack"
},

给webpack.config.js做如下配置

// webpack中引入其他的模块要使用commonJS模块化require导入 因为webapck是nodeJS开发的 不能使用
import导入
const ph = require('path')
module.exports = {
mode: 'development',
entry: ph.resolve('./src/app.js'), // 绝对路劲
output: {
path: ph.resolve('./dist'), // 配置出口目录
filename: "main.js" // 配置出口文件名称
}
}