基本使用
先使用npm init -y 指令初始化一个packgae.json文件（包描述文件）
将package.json文件中main更改为 src目录下的main.js文件
下载依赖 webpack、webpack-cli
npx指令是将node_modules中.bin临时添加为环境变量
使用npx webpack ./src/main.js --mode=development(开发模式)
总结：
webpack本身功能比较少，只能处理js资源，一旦遇到css等其他资源就会报错
不管你在模式中创建了js还是css文件，都要导入到入口文件中，才能被打包到一个指定区域的文件中，然后打包好了，再到public的html 中去引入才能被浏览器解析
五大核心概念
1、entry（入口）
指示webpack从哪个文件开始打包
2、output（输出）
指示webpack打包完的文件输出到哪里去，如何命名等
3、loader（加载器）
webpack本身只能处理js、json等资源，其他资源给需要借助loader，webpack才能解析
4、plugins（插件）
扩展webpack功能
5、mode（模式）
development 开发模式 production 生产模式
设置配置文件---在根目录下新建webpack.config.js文件 内容如下
const path = require('path'); //node.js核心模块，专门用来处理路径问题
module.exports = {
//入口
entry: './src//main.js', //相对路径
// 输出
output: {
//文件的输出路径
//__dirname 是node.js的变量，代表当前的文件夹目录
path: path.resolve(__dirname, 'dist'), //绝对路径
//文件名
filename: 'main.js',
},
// 加载器
module: {
rules: [
//loader的配置
],
},
// 插件
plugins: [
//plugin的配置
],
// 模式
mode: 'development',
}设置完配置文件打包就只用输入npx webpack即可
开发模式介绍
顾名思义就是开发时使用的模式
在该模式下主要做两件事：
1、编译代码使浏览器能识别运行
2、代码质量检查，树立代码规范
处理样式资源
使用webpack处理css、less、sass、styl样式资源
建议查看官方文档使用，根据官方文档的快速开始进行初步尝试
处理css资源
先下载依赖 npm install --save-dev css-loader
再将css文件引入到main.js中
配置webpack文件，将代码写在rules中
{
test: /\.css$/i, //只检测.css文件
use: [
//执行顺序，从右到左（从下到上）
"style-loader", //将js中css通过创建style标签添加到html文件中生效
"css-loader", //将css资源编译成commonjs的模块到js中
],
},注：官方文档只让下载了css-loader加载器，直接启动会报错，还需将style-loader加载器下载，（官方文档中的示例只让下载加载器中的一种，所以我们学习时，要学会看use中的加载器自己是否下载过再去看是否下载）
处理less资源、处理sass（scss）资源、处理stylus资源
跟处理css类似，还是根据官方文档来
图片资源处理
webpack已经做了处理无需下载加载器，但是对图片进行优化还是需要在rules写入相应代码
如：想要将10kb以下的图片转为data URI
{
test: /\.(png|jpe?g|gif|webs|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
//小于10kb的图片转base64
//优点：减少请求数量 缺点：体积会大三分之一
maxSize: 10 * 1024 // 10kb
}
}
}修改输出文件目录
在配置文件中修改：将filename中的路径更改为想要输出的目录
//入口文件打包输出的文件名
filename: 'static/js/main.js',图片路径也可更改：将以下代码写入到图片处理的地方（官方文档中输入asset中选择inline可查看相关文档）
generator: {
//输出图片的名字
//[hash:10] hash值取前10位
filename: 'static/images/[hash:10][ext][query]'
}自动清空上次打包内容
在配置文件中，在output内开启clean就能在打包时自动清空上次打包的内容
//自动清空上次打包的内容
clean: true处理字体图标资源
将字体图标库下载到本地并引入到项目中，iconfont.css放入css文件夹中并在src下创建fonts文件夹存放ttf/woff/woff2三个文件（注意修改iconfont.css中这三个文件的路径）
再去rules中设置打包的文件输出路径以及名称长短（和图片类似）
{
test: /\.(ttf|woff2?)$/,
type: 'asset/resource',
generator: {
//输出名字
//[hash:10] hash值取前10位
filename: 'static/media/[hash:10][ext][query]'
}
}处理其他资源
就是在处理字体图标资源里面追加想要打包的资源类型
如：map3、map4、avi等
test: /\.(ttf|woff2?|map3|map4|avi)$/,处理js资源
因为webpack只能编译js中ES模块化语法，不能编译其他语法
使用Eslint完成代码格式检测，使用Babel针对js做兼容性处理
Eslint
定义：可组装的JavaScript和JSX（react语法）检查工具
首先需要安装eslint文件
npm install eslint-webpack-plugin --save-dev注意: 如果未安装 eslint >= 7 ，你还需先通过 npm 安装：
npm install eslint --save-dev因为是插件所以需要先在顶部引入再去plugins里new
const ESLintPlugin = require('eslint-webpack-plugin'); new ESLintPlugin({
//检测那些文件
context: path.resolve(__dirname, 'src'),
}),在根目录下创建一个.eslintrc.js文件在里面配置eslint规则
module.exports = {
//继承 Eslint 规则
extends: ['eslint:recommended'],
env: {
Node: true, //启用node中全局变量
browser: true //启用浏览器中全局变量
},
parserOptions: {
ecmaVersion: 6, //es6
sourceType: 'module' //es module
},
rules: {
'no-var': 2, //不能使用 var 定义变量
}
}还需再创建一个类似git里面的忽略文件名为.eslintignore，将要忽略的打包文件名dist写在文件内
Babel（JavaScript编译器）
主要是将ES6编写的代码转换向后兼容
首先下载babel相关的包 （根据官方文档来使用）
npm install -D babel-loader @babel/core @babel/preset-env根据官方文档将代码写入rules中
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, //排除node_modules中的js文件（这些文件不处理）
use: {
loader: 'babel-loader',
// options: {
// presets: ['@babel/preset-env']
// }
}
}注释部分除了可以写在当前位置，还可以新建一个名为babel.config.js的文件来书写
module.exports = {
//智能预设：能够编译ES6语法
presets: ['@babel/preset-env']
}HTML处理
按照文档安装和引入包（和Eslint引入方式相同）
不同：new里面的内容不同
new HtmlWebpackPlugin({
//模板：以public/index.html文件创建新的html文件
//新的html文件特点：1、结构和原来一致 2、自动引入打包输出的资源
template: path.resolve(__dirname, 'public/index.html'),
})开发服务器&自动化
通过服务器监视，修改代码后自动打包
下载包：npm i webpack-dev-server -D
然后在plugins中配置
devServer: {
//开发服务器：不会输出资源，在内存中编译打包
host: 'localhost', //启动服务器域名
port: '3000', //启动服务器端口号
open: true, //是否自动打开浏览器
},配置完成后，开启打包指令变为：npx webpack serve
生产模式
准备一个config文件夹，将webpack配置文件移动到里面，并且复制一份，修改两份文件的名称分别为：webpack.dev.js、webpack.prod.js。将两个文件内容进行相应的修改
开发文件修改
entry入口中的相对路径（相对于运行代码的目录）不用改，因为运行代码时还是在根目录上运行的
output中path中的绝对路径需要更改，使用../跳出当前文件夹（配置文件中所以涉及到绝对路径的都需要更改）
但是一般开发模式没有输出了，使用path可以写成：path:undefined 因为开发模式是在内存中编译的，不会输出
运行开发模式 npx webpack serve --config ./config/webpack.dev.js
生产文件修改
路径的修改还是和开发模式一样
将开发服务器段的代码删除
将模式mode改为：production
运行生产模式 npx webpack --config ./config/webpack.prod.js
因为生产模式没有dev-server所以指令就不用serve
如果显示图片过大报错，就通过代码加大文件允许体积，提升报错门栏
module.exports = {
...
performance: {
hints: "warning", // 枚举
maxAssetSize: 30000000, // 整数类型（以字节为单位）
maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith(".css") || assetFilename.endsWith(".js");
}
}
...
};生产模式下打包生成的dist文件下会进行压缩
可以在package.json中配置指令
"scripts": {
"start": "npm run dev",
"dev": "webpack serve --config ./config/webpack.dev.js",
"build": "webpack --config ./config/webpack.prod.js"
},运行配置指令时：start指令直接 npm start即可 dev和build都需加run 即：npm run dev 和 npm run build
css处理---提取css成单独文件
css文件目前被打包到js文件中，当js文件被加载时会创建一个style标签来生成样式，但这对于网站来说会出现闪屏现象，用户体验不好，单独提取传输时文件，通过link标签加载性能才好
在官方文档Plugin中找到MiniCssExtractPlugin跟随文档使用
安装插件
npm install --save-dev mini-css-extract-plugin在生产文件中引入插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");将先前配置好的加载器中所有用到style-loader的地方都修改为MiniCssExtractPlugin.loader
注：MiniCssExtractPlugin.loader不是字符串，不需要引号
{
test: /\.css$/i, //只检测.css文件
use: [
//执行顺序，从右到左（从下到上）
MiniCssExtractPlugin.loader, //提取css成单独文件
"css-loader", //将css资源编译成commonjs的模块到js中
]
},最后插件还需要new调用并指定存储位置
new MiniCssExtractPlugin({
filename:'static/css/main.css'
})css兼容性处理
下载依赖包
npm i postcss-loader postcss postcss-preset-env -D将每一个css-loader后面插入一段代码（中间不能有其他代码）
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-preset-env', //能解决大多数样式兼容问题
]
}
}
},然后再在package.json文件中输入兼容条件
"browserslist": [
"last 2 version",------该浏览器最近的两个版本
"> 1%",-------99%的浏览器
"not dead"------没有死的浏览器
]封装样式loader函数----将重复的loader内容通过函数封装调用即可
function getStyleLoader(pre) {
return [
MiniCssExtractPlugin.loader, //提取css成单独文件
"css-loader", //将css资源编译成commonjs的模块到js中
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-preset-env', //能解决大多数样式兼容问题
]
}
}
},
pre,
].filter(Boolean) //当没有参数传入时，pre为undefined，通过filter函数将其过滤
}css压缩
安装插件
npm install css-minimizer-webpack-plugin --save-dev引入插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");将插件new并调用
new MiniCssExtractPlugin()html、js压缩
开启生产模式就默认压缩了，无需额外配置
webpack基础总结
1、两种开发模式
开发模式：代码能编译自动化运行
生产模式：代码编译优化输出
2、webpack基本功能
开发模式：可以编译ES Module 语法
生产模式：可以编译ES Module 语法，压缩js代码
3、webpack配置文件
五个核心概念
entry（入口）
output（输出）
loader（加载器）
plugins（插件）
mode（模式）
devServer配置
4、webpack脚本指令用法
webpack直接打包输出
webpack 启动开发服务器，内存编译打包没有输出
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
