1.为什么学习webpack?它有什么作用?
webpack是一个静态模块打包器.
1.能够识别代码，翻译，压缩，整合打包,减少文件数量,缩减代码体积,提高打开网站的速度;
2.能把高版本语法 转换成 低版本语法;
3.监听代码的变化，自动打包和刷新;
4.提取单vue文件里html/css/js.
2.webpack的基本使用
1.初始化项目，生成package.json文件 代码 ==> yarn init -y/npm init -y(-y意思初始化过程中全部默认为yes)
2.安装webpack包 代码 ==> yarn add webpackwebpack-cli -D(-D(--save-dev)是开发环境,-S(--save)是生产环境)
3.配置打包命令 代码 ==> 在生成的 package.json 文件里 配置 "scripts": {"build": "webpack"}
4.新建默认配置文件 webpack.config.js
5.运行打包命令 代码 ==> yarn build / npm run build
3.webpack的配置
1.入口
代码 ==> entry: './src/main.js'(这里的main.js是入口文件名,可以修改)
2.出口
代码 ==> output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }(dist和bundle.js为出口文件名,可以修改)
3.插件
html-webpack-plugin插件：自动生成html文件
1.yarn add html-webpack-plugin@5.3.1 -D
2.const HtmlWebpackPlugin = require('html-webpack-plugin')
3.plugins: [new HtmlWebpackPlugin({template: './public/index.html'})]
4.loader
1.webpack默认只能处理js文件，无法处理其他类型的文件
2.css-loader处理css
1.终端操作 yarn add css-loader@5.2.1 style-loader@2.0.0 -D
2.配置文件 module: { rules: [ { test: /.css$/, use: ['style-loader', 'css-loader'] } ] }
3.less-loader处理less
1.终端操作 yarn add less@4.1.1 less-loader@8.1.0 -D
2.配置文件 { test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
4.webpack5_asset module(无需额外包)webpack内置
{test: /.(png|jpg|gif|jpeg)$/,type: 'asset'}
5.webpack4_url-loader处理图片
1.终端操作 yarn add url-loader file-loader -D
2.配置文件 { test: /.(png|jpg|gif|jpeg)$/, use: { loader: 'url-loader', options: { limit: 8 * 1024 } } }
6.webpack4_url-loader处理字体图标
和图片的url-loader是一样的
7.babel处理高版本的语法
1.安装依赖包 yarn add -D babel-loader@8.2.2 @babel/core@7.13.15 @babel/preset-env@7.13.15
2.配置具体规则
4.webpack开发服务器
1.webpack-dev-server
1.启动开发服务器，自动重新打包和刷新浏览器
2.安装依赖包 yarn add webpack-dev-server@3.11.2 -D
3.配置脚本 "serve": "webpack server"
4.运行脚本
1.yarn serve 开发时启动服务器
2.yarn build 项目打包使用
5.额外的配置
module.exports = { devServer: { open: true, port: 3000 } }
5.webpack打包发布项目
1.项目开发完成, 可以使用build命令, 输出dist目录交给后台/运维部署给用户使用
2.和开发服务器环境的代码没有任何关系了
3.命令: yarn build (实际执行的是webpack)
