webpack 5--学习笔记
webpack 5–学习笔记
部分配置文件
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin') //npm i clean-webpack-plugin -D
const { DefinePlugin } = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:'development', // production 生产环境
devtool:'source-map',
entry:'./src/index.js',
resolve:{ //模块解析规则
extensions:[".js",".json",'.ts','.jsx','.vue'], //import 和require没有写后缀时，补充后缀
alias:{
'@': path.resolve(__dirname,'src') //import 和require 目录的简化，
}
}
output:{
filename:'js/main.js',
path: path.resolue(__dirname,'dist'),
asssetModuleFilename:'img/[name].[hash:4][ext]'
},
module:{
rules:[
{
test:/\.less$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
importLoaders:2 //为了能往前找，用来处理css中的url('/img.png')、@import 等特殊的
}
}，
'postcss-loader',
'less-loader'
]
}
//{
//test:/\.css$/,
//use:[
//loader:'css-loader'
//]
//},
//{
// test:/\.css$/,
// loader:'css-loader'
// },
{
test:/\.css$/,
use:['css-loader']
},
{
test:/\.(png|svg|gif|jpe?g)$/,
type:'asset/resource',
generator:{
filename:'img/[name].[hash:4][ext]'
}
},
{
test:/\.(png|svg|gif|jpe?g)$/,
type:'asset/inline' //所有的资源都转换成base64
},
{
test:/\.js$/,
exclude:/node_modules/,
use:['babel-loader']
}
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title:'这里是标题'，
template:'./public/index.htm'
}),
new DefinePlugin({
BASE_URL:'"./"'
}),
new CopyWebpackPlugin({
patterns:[
{
from:'public', //把public里面的内容拷贝出来
globOptions:{
ignore:['**/index.html']
}
}
]
})
]
}
为什么需要loader
loader是什么
CSS-loader
style-loader
less-loader
处理css打包 postcss
postcss-loader处理兼容
importloaders属性
处理图片
file-loader
browserslistrc用于条件筛选，服务于css和js的内容 比如指定浏览器的具体版本等
.browserslistrc 配置文件 优先级低于webpack.config.js配置文件 ，但建议还建议拿出来直接放到单独的配置文件中使用，方便管理和复用
postcss.config.js 用于告诉postcss-loader使用什么插件来使用
babel-loader 相关配置文件 告诉babel使用什么插件来处理兼容
babel.config.js(json cjs mjs) 建议使用这个
babelrc.json(js) //babel7之前 使用的更多
babel.config.js文件中内容：
module.exports = {
presets:['@babel/preset-env']
}
polyfill 配置
增加了一些babel不能处理的一些兼容
webpack5中需要自己加进去， 为了优化处理，webpck5中去除了polyfill，需要自己配置 优化打包速度
webpack4中是直接包含Polyfill的，但是打包之后包比较大，
//不建议使用这个来安装 @babel/polyfill
// npm i @babel/polyfill --save
**建议使用下面来安装Polyfill----可查看官方文档
npm i core-js regenerator-runtime
babel.config.js中配置
module.exports = {
preset:[
[
'@babel/preset-env',
{
//fasle不对当前的js处理做polyfill的填充
//usage:依据用户源代码当中所用到的新语法
//entry:依据当前筛选出来的浏览器决定填充什么
useBuiltIns:false,
corejs:3 //指定corejs使用的版本
}
]
]
}
webpack5
区别：通过设置 type:asset/resoource，对字体图标进行打包 而不是复制
{
test:/\.(ttf|woff2?)$/,
type:'asset/resource',
generator:{
filename:'font/[name].[hash:3][ext]'
}
}
webpack4
字体图标作为静态资源直接进行拷贝（data URI进行添加）
webpack
loader: 转换 特定类型 识别读取文件和资源的内容
plugin: 可以处理更多的事情 （打包过程中来使用） 在特定的时间去做某件事件（比如压缩css）
自动清除dist文件 clean-webpack-plugin
new CleanWebpackPlugin()
打包html文件 ：html-webpack-plugin
https://www.npmjs.com/package/html-webpack-plugin
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
在plugin中添加
new HtmlWebpackPlugin({
title:'标题'，
template:'./public/index.html' //指定其为模板
})
BASE_URL怎么配置
在webpack配置文件中, 通过内置的DefinePlugin来配置 (不用安装，直接用)
const {DefinePlugin} = require('webpakc')
module.exports={
plugins:[
new DefinePlugin({
BASE_URL:'"./"'
})
]
}
copy-webpack-plugin
1、安装
npm i copy-webpack-plugin -D
2、使用
babel使用
新语法（es6、TS、jsx文件）转换成浏览器平台能直接使用的代码
@babel/core
@babel/cli
@babel/preset-env 插件的集合
babel-loader
webpack-dev-server
优点：局部刷新 、热更新 、所有的数据处理在内存中完成
安装
npm i webpack-dev-server
“scripts”:{
“build‘: “webpack --config lg.webpack.js”
“serve”:“webpack serve --config lg.webpack.js” //package.json 中
}
vue组件支持热更新：
通过安装vue-loader实现
vue-loader 14版本可以直接实现HMR
vue-loader 15版本需要去webpack-config.js中单独添加
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
在plugin中添加 new VueLoaderPlugin()
webpack-dev-server
devServer:{
hot:true, //html的功能
hotOnly:true, //不被其它组件的错误影响
port:4000, //指定端口
open:false, //是否在保存之后打开浏览器
compress:true, //开启gzip压缩
historyApiFallback:true //浏览器刷新时，路由跳转到index.html
proxy:{ //跨域的解决
// /api/users
// http://localhost:4000/api/users
// https://api.github.com/api/users
// /api/users---> 后端接口中如果有/api 就不需要pathRewrite， 如果没有就需要重写成空''
'/api':{
target:'https://api.github.com',
pathRewrite:{'^/api':''}, // 重新接口中的路径
changeOrigin:true //改变请求头中的 host
}
}
}
proxy代理配置(适应于开发环境)
跨域问题解决
服务端与服务端之间是不存在跨域的
https://api.github.com/users
axios.get("/api/users").then(()=>{
})
resolve模块解析规则
resolve
source-map作用
mode的配置
映射—在调试的时候可以定位到源代码中的信息
devtool:‘source-map’ //默认为eval()
代码懒加载：
可以动态加载
document.addEventListener('click',()=>{
import('./utils').then({default:element}=>{
console.log(element)
document.body.appendChild(element)
})
})
preload和prefetch
第三方扩展设置CDN
提高打包速度，提高访问速率
1、在webpack中加入以下配置
external:{
lodash:’_’
}
2、找第三方官网中cdn地址
将下面的代码加入到Html文件中
打包dll库（DllPlugin）
用某种方法实现拆分bundles,同时还大大提升了构建速度，
动态链接库
把文件（如react、react-dom、vue等）的打包成单独的文件
抽离css(mini-css-extract-plugin)
webpack5新增的
如果是开发环境用style-loader
如果是生产环境用MineCssExtractPlugin.loader替换
压缩css(css-minmizer-webpack-plugin)
生产环境中使用
放到optimization中
terserPlugin压缩js
webpack5以上 不需要安装，是内置的
生产环境中使用
基于terser 有三个大的功能 parser 、compress、mangle
optimization中添加
new TerserPlugin()
scope hoisting作用域规则提升
性能优化
webpack.optimize.ModuleConcatenationPlugin()
usedExports配置
usedExports 配合terser-webpack-plugin来使用 才能摇掉多余的js代码
在optimization中设置
const TerserPlugin = require("terser-webpack-plugin");
module.exports={
optimization:{
usedExports:true, //标记不被使用的函数
minimizer:[
new TerserPlugin({
extractComments:false, //不生成.txt文件
})
]
}
}
sideEffects配置
在package.json中设置
“sideEffects”:false //取消所有模块的副作用
“sideEffects”:[
“./src/title.js”
] //不被摇掉的
在webpack.common.js中设置
在css配置中增加：
rules:{
sideEffects:true
}
css-treeShaking 优化css
需要安装purge-webpack-css-plugin
需要安装glob
npm i glob
const PurgeCssPlugin= require('purge-webpack-css-plugin')
const resolveApp = require('./paths')
const glob = require('glob')
new PurgeCssPlugin=({
paths:glob.sync(`${resolveAppp('./src')/**/*}`,{nodir:true}), //找到文件，而不是目录
safelist:function(){
return:function(){
standard:['body','html','ef'] //这些标签或者样式不会被摇掉
}
}
})
模板编译
vue template explorer (生成render函数)
https://template-explorer.vuejs.org/
vue2中template 中的数据是原样输出到render函数中 （文本内容：标签内的文本内容尽量不要有多余的空格和换行）
vue3中对此做了优化（去除了标签内多余的空白）