1.webpack介绍 是基于nodejs运作

• webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
• 还能翻译和压缩代码
• 减小代码包体积, 让浏览器更快速打开网页

2.安装webpack

• 1.创建一个文件夹用npm init 初始化项目
• 2.安装：npm i webpack webpack-cli -D （开发依赖）
• 3.npx webpack -v (查看版本及是否安装成功）

3.创建webpack.config.js配置文件 （打包js文件）

1. 创建一个js文件（index.js）来引入需要打包的js文件
2. 比如index.js引入一个tool.js ：可使用commonjs规范（node.js）或者es6模块化导入导出
3. 配置文件：创建一个webpack.config.js文件用来给index.js及引入的文件打包并生成一个新的js文件（main.js）
4. 调用小黑窗指令打包：npx webpack
5. 两种打包模式：（1）development :开发模式(代码不会压缩 混淆)（2）production:生产模式（压缩，混淆，加密....... 不可读）
6. 入口和出口文件名自由设置

4.配置文件：下载loader插件 打包css文件和less文件

1. 下载css-loader插件：npm i css-loader -D 让css文件能打包
2. 下载style-loader插件：npm i style-loader -D 让打包过的css文件在页面显示
3. 下载less-loader插件：npm i less-loader less -D 让less处理成css
4. css里面图片处理只需要配置下即可
5. index.js引入要打包的css文件或者less文件
6. 配置webpack.config.js文件

5.配置文件：下载plugin插件

1. 下载npm i html-webpack-plugin -D ：功能：把我们自已写的.html文件复制到指定打包出口目录下，并引入打包过的的资源代码并删除注释和空格
2. 下载npm i clean-webpack-plugin -D：在生成打包文件之前，把目录清空掉
3. 在webpack.config.js中引入两个插件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

并配置插件