健哥从webpack开始(今天开始我要写文章了)，加油耶耶耶~
webpack5上篇
第一步：webpack的基本使用
1.npm init -y (模拟下载一个package.json文件,注意name:不能为webpack); 2.npm i webpack webpack-cli -D (下载webpack到开发环境中,webpack-cli指的是webpack的一些指令) 3.npx webpack ./src/main.js --mode=development(将nodemoudules .bin文件添加到环境变量中，并且指定文件入口进行打包，并且指定打包模式(development或者production))，生产环境会对结果进行压缩， 4.测试将index.html中的引入文件改为../dist/main.js(运行结果成功);注意npx webpack 代表运行webpack指令对文件进行打包。 5.目前只能处理js(css等不能处理)
第二部：webpack的配置
1.webpack的五大核心(entry入口,输出output,loader加载器：处理css等,plugins插件：webpack扩展功能,node模式:development开发模式,production生产模式) 2.配置webpack(webpack自身无法处理样式资源，字体图标，图片资源，hmtl资源等，所以需要使用加载器loader来处理这些)： I.webpack必须在根目录下新建一个webpack.config.js ii.当我们对webpack.config.js进行了简单的配置后(没有配置loader和plugins) 就直接可以运行npx webpack (会自动读取文件找到webpack文件配置，会自动查找)
第三部：配置webpack处理css，sass，scss，stylus样式资源(webpack官方文档)
1.必须在main.js中引入该样式资源，webpack才会将其打包
2.下载一个css loader 运行指令(npm i --save-dev css-loader)
3.在webpack的module 对象的rules数组中配置
{
rules:[
{
test:/\.css$/, //检测xxx结尾文件， \转译符号. 只是检测.css文件结尾的文件
use:[
'style-loader', //将js中css通过创建style标签添加到html文件中生效
'css-loader' //执行顺序从右到左，从下到上 将css资源编译为commonjs模块到js中
]
}
]
}
第四部：配置webpack处理less资源
1.必须在main.js中引入less资源
2.下载less loader 执行指令(npm i less less-loader --save-dev);
3.modules rules中配置：(注意use可以使用多个loader，loader：xxx 只能使用一个loader)
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader' //将less编译成css文件
]
}
第五部：配置使用sassloader
1.必须在main.js中引入sass资源
2.下载 sass loader 执行指令(npm i sass-loader sass --save-dev)
3.module:{
rules:[{
test:/\.s[ac]ss$/,
use:[
'style-loader',
'css-loader',
'sass-loader' //将sass资源编译为css文件
]
}]
}
第六部：配置使用stylusloader
1.必须引入stylus资源
2.下载stylus 执行指令(npm i stylus-loader -D)
3.配置webpack.config.js文件
modules:{
}
4.执行指令编译(npx webpack)
第七部：处理图片资源
1.小于5kb转换为base64格式（会变大几kb，但是会减少请求）转换为data url形式
2. {
test:/\.(png|jpe?g|gif|webp|svg)$/,
type:'asset',
parser:{
dataUrlCondition:{
maxSize:10*1024,//10kb //小于10kb会转base64//有点减少请求数量，缺点体积会增大kb
}
}
}
3.执行npx webpack 编译打包
第八部：修改打包资源保存的dist目录(修改output输出)
1.修改js输出目录
output:{
//文件输出路径(绝对路径)
//path是所有文件的输出目录，要区分js和css等使用dist或者dist/js不合适
path:path.resolve(__dirname, 'dist'),//__dirname nodejs的变量，代表当前文件夹目录
//输出文件名字,js打包输出名字(入口文件名)，将入口文件输出到js文件夹中
filename:'static/js/main.js' //自定义文件名
},
2.修改图片输出目录
{
test:/\.(png|jpe?g|gif|webp|svg)$/,
type:'asset',
parser:{
dataUrlCondition:{
maxSize:30*1024,//10kb //小于10kb会转base64//有点减少请求数量，缺点体积会增大kb
}
},
generator:{
//输出的图片名字 hash图片唯一标志符id ext 文件扩展名.
png //hash：10 代表只是取值10位
query查询参数
filename:'static/images/[hash:10][ext][query]'
}
}
第九部：避免每次修改都要删除dist
设置output中clean:true
第十:处理字体图标资源(阿里巴巴图标库)使用
1.添加入库
2.购物车查看
3.点击添加项目
4.下载到本地
5.解压字体图标
6.demo_index文件解释使用方法
7.unicode fontclass symbol三种使用方法，一般使用fontclass
8.iconfontscss 文件 还有三个其他文件ttf woff2 woff 放到项目文件中
9.引入css文件，标签中使用<span class="iconfont icon-名字>
10.修改iconfont.css文件中引入的三个其他文件路径改造一下(ttf,woff这些文件)
11.在main.js中引入iconfont.css
第十一：webpack中配置字体图标打包
1.{
test:/\.(ttf|woff2?)$/,
type:'asset/resource', //原封不动输出
generator:{
//输出的图片名字 hash图片唯一标志符id ext 文件扩展名.png
//hash：10 代表只是取值10位 query查询参数
filename:'static/media/[hash:10][ext][query]'
}
}
2.执行npx webpack (执行webpack内部指令进行打包)
3.<script src="../dist/main.js"></script> //引入打包后的dist文件进行效果查看
<span class='iconfont iconfont-bianji'> //页面中使用
第十二：webpack中配置处理视频音频
{
test:/\.(ttf|woff2?|map3|map4|avi)$/, //添加处理的视频等资源
type:'asset/resource', //原封不动输出
generator:{
//输出的图片名字 hash图片唯一标志符id ext 文件扩展名.png
//hash：10 代表只是取值10位 query查询参数
filename:'static/media/[hash:10][ext][query]'
}
}
第十三：处理js资源(webpack只能编译一些js中es模块化语法，其他的箭头函数三点运算符不能处理，比如es6不能处理白屏等)
1.js兼容性使用babel
2.代码格式使用eslint(默认支持react)
3.eslint配置才能使用(配置了eslint那么就会停止打包或者警告)
第一种方法：新建配置文件
.eslintrc.js //使用common js 模块语法
module.exports={
rules:{
},
继承
extends:[],
rules会覆盖extends继承的规则
parseOption解析选项
}
第二种方法：package.json种eslintConfig： 不需要创建文件在原来文件基础上写
webpack种配置eslint 插件配置(他知道只是检查开发中的代码，不检查dist中的打包后的代码，但是vscode中eslint都检查)
1.执行npm i eslint-webpack-plugin eslint --save-dev //安装eslint插件和eslint
2.插件都需要引入，再new调用
I.
webpack.confing.js中
const ESLintPlugin=require('eslint-webpack-plugin')
//插件
II.
plugins:[
//plugin的配置
new ESLintPlugin({
//检测那些文件，src下面的文件
context:path.resolve(__dirname,'src')
})
],
iii.为了让vscode中的eslint插件不检查我们的打包后的dist文件可以根目录下配置一个.eslintignore文件
git中有.gitignore文件
1.新建.eslintignore文件
2.文件中写入dist
第十四部:使用babel将es6语法编译为es5等低级语法兼容低版本浏览器(编译工具)babel-loader
1.配置babel文件
第一种
新建babel.config.js文件
主要是配置presets预设(就是一组babel插件扩展babel功能)
@babel/preset-env:一个智能预设，允许你使用最新的javsscript(主要)
@babel/preset-react:一个用来编译react.jsx语法的预设
@babel/preset-typescript:一个用来编译typescript语法的预设
第二种:
package.json中babel：不需要创建文件，在原有文件中基础上写
babel会自动查找和读取你的配置
2.
i.下载指令
npm i -D babel-loader @babel/core @babel/preset-env
ii.配置babel-loader
{
test:/\.js$/,
exclude:/node_modules/,//排除node_modules中js文件不处理
loader:'babel-loader',
// options:{
// presets:['@babel/preset-env'] //可以直接写智能预设也可以外面写
// }
},
或者新建babel.config.js文件中配置babel-loader的预设
第十五处理html资源(将来打包可能会生成多个css文件和多个js文件，我们希望能够自动引入css和js资源，而不是使用<script src=".../dist/static/js/main.js>)那么就要使用htmlwebpackplugin
1.下载npm i --save-dev html-webpack-plugin
2.引入入口文件main.js中引入
执行const HtmlWebpackPlugin=require('html-webpack-plugin');
3.new 调用
执行new HtmlWebpackPlugin()
4.仅仅这样会丢失其他页面dom结构如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="static/js/main.js"></script></head>
<body>
</body>
</html>
5.进一步处理:
new HtmlWebpackPlugin({
//模板:以public/index.html文件创建新的html文件
//新的文件1.结构和原来一致,2.会自动引入打包的资源
template:path.resolve(__dirname,'public/index.html')
})
这样之后我们可以直接运行打包后的index.html文件就有效果
第十六：开发服务器的自动化配置(当我们改动源文件的时候我们的打包后的代码不会自动更新，需要使得打包后的代码也是同步我们的修改，我们就需要配置自动化) dev-server
1.下载处理包
执行:npm i webpack-dev-server -D (会在webpack中启动一个开发服务器当我们代码修改时候就会自动重新打包更新代码)
2.配置服务器
//开发服务器配置，一旦启用了服务器后打包指令就变了又npx webpack变为 npx webpack serve
devServer:{
host:'localhost',//启动服务器域名
port:'3000',//启动服务器端口
open:true//是否自动打开浏览器
},
3.执行打包指令
npx webpack serve (按contrl + c终止开发服务器)执行这个指令是不会对dist文件中输出打包后的文件的
第十七:前面的是指定开发模式，现在要开发和生产分别写在两个文件中配置
1.开发模式中不需要输出文件path 为undefined
output:{
//文件输出路径(绝对路径)
//path是所有文件的输出目录，要区分js和css等使用dist或者dist/js不合适
//开发模式没有输出
path:undefined,
filename:'static/js/main.js', //自定义文件名
},
2.开发模式模式中相对路径不需要改变，绝对路径需要回退一层
//入口(相对路径)不变
entry:'./src/main.js',
//插件所有绝对路径回退一层
plugins:[
//plugin的配置,开发模式下绝对路径要回退一层，因为__dirname直接定义到了confing文件夹下了
new ESLintPlugin({
context:path.resolve(__dirname,'../src')
}), //eslint检察语法函数插件调用
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'../public/index.html') //所有绝对路径回退一层
})//处理html资源的插件
],
3.执行开发模式的打包指令(--config是指定我们的配置文件在哪里)
npx webpack serve --config ./config/webpack.dev.js
4.生产模式
有输出路径
绝对路径回退一层
不需要devserve
执行生产模式的打包指令
npx webpack --config ./config/webpack.prod.js
默认会对html和js压缩
5.修改打包的指令，因为指令太长
在package.json 的script 中配置指令
"scripts": {
"start":"npm run dev", //专门配置npm run dev 为开发模式
"dev": "webpack serve --config ./config/webpack.dev.js",
"build":"webpack --config ./config/webpack.prod.js"
},
今后执行开发模式的指令
npm start (实际运行的npm run dev 启动的是开发模式的指令)
今后生产环境直接使用
npm run build
注意：除了start 使用npm start 其他都要加run
第十八:生产环境的详细配置(经过上面的生产环境的简单配置webpack会先解析js再创建style标签添加样式的，这样突然出现css图片样式出现闪屏幕现象)
应该单独打包生成css文件，然后通过link标签引入，这样就没有闪频现象（而不是创建style标签）
1.处理css文件(提取css为单独文件的操作)MiniCssPlugin
i.下载插件：
npm i --save-dev mini-css-extract-plugin (--save 代表会将项目记录到dependencies中这是项目中运行需要的文件，而--save-dev代表是项目开发中需要这些文件开发完成后不需要这些文件了)
ii.在webpack.prod.js中引入new调用
1.const MiniCssExtractPlugin=require('mini-css-extract-plugin');
2. 将原来style-loader的地方改为MiniCssExtractPlugin.loader
{
test:/\.styl/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
'stylus-loader',//将stylus编译为css文件
]
},
3.插件需要new 调用
//插件
plugins:[
//plugin的配置
new ESLintPlugin({
context:path.resolve(__dirname,'../src')
}), //eslint检察语法函数插件调用
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'../public/index.html')
}),//处理html资源的插件
new MiniCssExtractPlugin()
],
4.这样会单独生成一个mian.css文件
指定main.css文件所在路径
new MiniCssExtractPlugin({
filename:'static/css/mian.css'
})
5.执行重新打包
npm run build
这样会发现样式是通过link标签引入的而不是创建style标签了，不会出现闪频
第十九：对css样式兼容性处理使用postcss处理
1.下载 npm i postcss-loader postcss postcss-preset-env -D
注意错误：
1.can't resolve 'style-loader' in 'C:\Users\16585\Desktop\webpack' (代表未下载style loader)
解决办法：npm i style-loader -D 注意用了webpack modules中多少个loader就下载多少个loader
2.WARNING in ./src/sass/index.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/sass/index.sass)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
This selector doesn't have any properties and won't be rendered.
(这个错误是由于写sass样式的时候 : 后面要有个空格，如：
.box
width: 100px
height: 200px
background-color:hotpink
)
解决：
background-color: hotpink
