webpack

全局配置

• mode 打包模式
  • "development" 打包结果不会被压缩
  • "production" 打包结果被压缩
• devtool
  • "source-map" 生成sourcemap文件，报错会映射到源码位置，便于调试
  • "eval" 默认值 打包将每个模块执行eval，打包速度快，但调试不方便

loader

webpack默认只能处理js模块，可以使用loader对其他类型模块进行处理

样式

• 打包处理css文件需要:

1. 安装 style-loader和css-loader
2. 在webpack.config.js中新增配置节点module，module有rule属性(数组)存放所有第三方文件匹配处理规则

module:{
  rules:[  
    {test: /\.css$/, use: ['style-loader', 'css-loader']} 
  //test内是匹配的文件的正则，use规定加载器
  //use中的loader从右往左执行，右边执行完成后将结果交给左边的loader，最后将结果给webpack
]}

• 加载less文件用less-loader ， 记得安装less
• 加载**scss(sass)**用sass-loader(依赖node-sass) 安装node-sass一般用cnpm, 否则可能失败。vue脚手架创建的项目可能出现this.getResolve not found，使用8以下的sass-loader版本

兼容：postcss-loader搭配postcss-preset-env插件可兼容大多数现代游览器样式

url地址

webpack默认不能处理url地址，需要使用url-loader(依赖于file-loader)

file-loader读取静态文件模块，url-loader与file-loader相似，但可将较小文件url转换为base64的uri

module:{
  rules:[  //test中为匹配图片文件正则
    {test: /\.(jpg|jpeg|png|bmp|gif)$/, use: 'url-loader'} //use的值可用url中?方式传参
		  //test中为匹配字体文件的正则(bootstrap.css中就有)
    {test: /\.(eot|ttf|svg|woff|woff2)$/, use: 'url-loader'}  
]}

• use属性的值可用url中?方式传参(&分隔) ：
  • limit — 当文件大小不超过limit设置的字节数时才使用base64格式(默认全部使用base64)
  • name — 设置处理后路径中的目标文件名, 它的值可以写：
    • [hash:n] — n位数的随机hash值
    • [name] — 原目标文件名
    • [ext] — 原目标文件后缀

'url-loader?limit=字节数&name=[hash:8]-[name].[ext]'
//多个图片重名会被最后一个覆盖，这样设置name避免重名

内联方式指定模块loader: import "<loaderName">!<modulePath>

资源模块类型

在webpack5中，可以使用不同的type属性来代替一些资源loader，可以是如下值:

• asset/resource 发送单独文件并导出url (之前用file-loader)
• asset/inline 导出data uri (之前用url-loader转base64)
• asset/source 导出资源源代码 (之前用raw-loader)
• asset 自动选择发送文件或转为data uri，通过parser.dataUrlConfition配置转换条件 (之前用url-loader并配置limit为转换条件)

使用该方法可通过type统同级的generdator配置输出的规则

plugin

loader只能对模块进行处理转换，而插件可以对webpack打包整个过程进行丰富

• DefinePlugin 内置插件 创建在编译时可使用的全局常量。配合HtmlWebpackPlugin可方便地自定义入口模板 index.html
• ClearWebpackPlugin 每次打包时清理之前打的包
• CopyWebpackPlugin 复制文件，有被其他插件编译处理的要配置忽略

babel

babel工具链可转义js，在旧游览器兼容es6或更高级的语法

通过babel-loader与webpack配合，在打包时进行转换

• @babel/core babel核心代码，必须安装
• 插件：对于不同的特性，需要不同的babel插件，但需要一个个安装
• 预设：只需设置presets即可预设常用的特性，比一个个安装插件方便：
  • @babel/preset-env 提供es6常用语法

babel相当于编译器有三个流程: 解析 => 转换 => 生成

1. 源代码 => 词法分析 => tokens数组
2. tokens数组 => 语法分析 => ast抽象语法树
3. 遍历ast => 应用插件 => 新的ast
4. 通过新ast生成新的源代码

webpack中实现babel相关loader功能：

1. 需要安装两套包:

   1.1 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

   1.2 cnpm i babel-preset-env babel-preset-stage-0 -D

   ​ 1.2.1 babel-preset-env 提供比 babel-preset-es2015更新的，包含所有es相关语法

2. 在webpack.config.js配置属性module中新增rules匹配规则:

   {test:/\.js$/, use: 'babel-loader', exclude: /node_modules/}  
   //exculde排除环境依赖包中的js

3. 项目根目录新建**.babelrc**(json格式)来配置babel:

   • plugins中放置安装的babel插件(以babel-plugin开头)

   • presets放置安装的预设(语法)(以babel-preset开头)

     配置时开头都不加

   {
     "presets": ["env", "stage-0"]，
     "plugins": ["transform-runtime"]
   } 	

• babel-loader8不兼容babel-core6，所以用babel-loader7。注意版本匹配

优化

项目中使用普通方式导入模块，都会被打包到app.js。可使用import(path)导入：

//返回promise实例
const promiseA = import(path)
promiseA.then(data => {
  //data有对应模块暴露的数据
})
打包时该模块会生成独立chunk，提升首次加载时间

也可以使用SplitChunksPlugin提取公共代码chunk，在加载时会被放到缓存区

赏

谢谢你请我吃糖

支付宝

微信

• 本文作者： MR-QXJ
• 本文链接： https://mr-qxj.github.io/2021/10/30/打包/webpack/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！