webpack使用下

webpack-下

从yarn build开始，都走了哪些流程

执行webpack命令，找到配置文件，入口和依赖关系，打包代码输出到指定位置

webpack处理图片文件

webpack无法自己处理图片文件

webpack5使用asset module技术来实现字体文件和图片文件的处理，无需配置额外的loader

https://webpack.docschina.org/guides/asset-modules/

1：webpack5.在rules里，针对图片文件设置type:asset

2:小于8kb转base64字符串进js里，大于8kb输出文件

• 在src/assets准备图片文件


• 在less/aa.less文件中对body设置背景图片


• 在入口导入图片文件，设置到img标签插入到body


• 打包

module:{
rules:[
{
// 图片文件的配置 (仅适用于webpack5版本)
test: /\.(gif|png|jpg|jpeg)/,
type: 'asset', //匹配上面的文件后，webpack会把他们当静态资源处理打包
// 如果你设置的asset模式 以8kb来区分图片文件
// 小于8kb的 把图片文件转base64，打包到js中
// 大于8kb的，直接把图片文件输出到dist下
},
]
}


为什么8kb上下的图片要区分呢

图片翻译成base64打包到js文件中

好处：浏览器不用法请求了，直接可以读取，速度快

坏处：图片太大，再转base64就会让图片的体积增大30%左右，得不偿失

webpack处理字体图标

• src/assets中放入fonts字体相关的文件夹

  
  



• src/main.js引入assets/font/iconfont.css

  
  



• src/main.js创建一个i标签，把字体图标标签添加到body上

  
  



• 添加针对字体文件的加载器规则，使用asset/resource （直接输出文件并配置路径）

  
  



• 打包

  module:{
rules:[
{
test: /\.(ttf|eot|svg|woff|woff2)/,
type: 'asset/resource',
generator: {
// 生成文件的文字 定义规则
filename: 'fonts/[name].[hash:6][ext]', //[ext] 会替换成.eot/.woff
},
},
]
}

  

webpack对js语法降级

babel https://www.babeljs.cn/

babel-loader https://v4.webpack.js.org/loaders/babel-loader/

babel一个Javascript编译器，把高版本js语法降级处理输出兼容的低版本语法

babel-loader 让webpack编译打包js代码

步骤：

• src/main.js 定义箭头函数，打印箭头函数变量（不要调用，为 了让webpack打包函数，看降级效果）

  
  



• 下载加载器

  npm install -D babel-loader @babel/core @babel/preset-env webpack

  




• webpack配置

  
  



• 打包

  
  

{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, //不去匹配这些文件夹下的文件
use: {
loader: 'babel-loader', //使用这个loader处理js文件
options: {
//加载器选项
presets: ['@babel/preset-env'], // @babel/preset-env 降级规则 按照这里的规则降级我们的js语法
},
},
},


webpack开发服务器

问题：每次修改完代码，重新yarn build打包，才能看到最新效果，实际工作中，打包yarn build非常耗时

为什么：

• 从0构建依赖


• 磁盘读取对应的文件到内存，webpack开始加载


• 再用对应的loader进行处理


• 将处理完的内容，输出到磁盘指定目录

解决：

起一个开发服务器，缓存一些已经打包过的内容，只重新打包修改的文件，最终运行在内存中给浏览器使用

打包在内存中，速度快

自动更新打包变化的代码，实时返回给浏览器显示

使用

webpack-dev-server

https://webpack.docschina.org/api/webpack-dev-server/#root

• 下载

  npm install --save-dev webpack-dev-server

  




• 自定义webpack开发服务器启动命令serve 在package.json里

  "scripts": {
"build": "webpack",
"serve": "webpack serve"
},

  




• 启动服务器

  yarn serve


  webpack-dev-server 会给我们一个地址+端口号 ，浏览器中访问就可以看到打包的index.html页面

  
  

修改端口号

webpack.config.js中修改端口号，重新启动项目

module.exports = {
mode: 'development',
devServer: {
port: 3000,
},
}