【webpack】基础 - JS、其他资源打包和热更新

旺仔小猪
221 阅读2分钟

一、JS资源打包 - 编译

  • 作用：将ES5以上的语法转成ES5，保证在低版本浏览器的兼容性

  • 安装：

    npm i babel-loader @babel/core @babel/preset-env core-js -D

    babel-loader @babel/core @babel/preset-env core-js这四个插件的主要作用是在webpack打包的时候，将ES6的代码转换成ES5版本的，区别点如下：

    • babel-loader：在webpack里应用babel解析ES6的桥梁
    • @babel/core：是babel核心模块
    • @babel/preset-env：babel预设，一组babel插件的集合
    • core-js：为Promise、symbols、collections、iterators、typed arrays、etc 等特殊语法提供编译

  • 配置：

    // webpack.config.js
module: {
    rules: [
        // 编译ES5以上的语法
        {
            test: /\.m?js$/, // 文件匹配规则
            exclude: /(node_modules|bower_components)/, // 排除
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns: 'usage', // 按需加载
                                corejs: 3, // 指定版本
                                targets: 'defaults'
                            }
                        ]
                    ],
                    plugins: ['@babel/plugin-proposal-object-rest-spread'],
                },
            },
        },
    ],
},

  • 效果：

    image.png

    image.png

  • 官网：

二、JS资源打包 - 代码格式校验

  • 作用：查找和修复 JavaScript 代码中的问题

  • 安装：

    npm install eslint eslint-webpack-plugin eslint-config-airbnb-base eslint-plugin-import --save-dev
    • eslint：校验代码格式的工具
    • eslint-webpack-plugin：webpack的eslint插件
    • eslint-config-airbnb-base：JS代码格式规范；校验的依据：GitHub - airbnb/javascript: JavaScript Style Guide
    • eslint-plugin-import：用于在package.json中读取 eslintConfig 配置项

  • 配置：

    // webpack.config.js
// 引用ESlint规则
plugins: [
  new ESLintWebpackPlugin({
    context: resolve(__dirname, 'src'), // 指定文件根目录
    fix: true, // 自动修正不符合规范的代码（会修改源文件）
  })
],

    // .eslintrc.js
// extends：指定eslint规范
module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es6: true
  },
  extends: "airbnb-base", // 指定eslint规范
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  }
};

  • 效果： image.png 打包失败了，提示有3处不合规范，在我们的使用符合规范的前提下，可以使用 // eslint-disable-next-line 注释

    image.png 打包前，这里我使用的是双引号""，打包结束后就是单引号''

  • 官网： EslintWebpackPlugin | webpack 中文文档 (docschina.org)

三、玩转资源模块AssetModules

  • 定义：资源模块(asset module)是一种模块类型，它允许使用资源文件（字体、图标、图片、html等），而无需配置额外的loader
  • webpack4 版本，通常使用：
    • raw-loader将文件作为字符串输出
    • file-loader将文件发送到输出目录
    • url-loader设定一个临界值（文件大小），大于该值将文件发送到输出目录，否则将文件转为base64合并到 js 文件当中
  • 在webpack5 版本，可以使用 Asset Modules 的4种新的模型类型来替换这些loader
    • asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
    • asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
    • asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
    • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
  • 官网：

四、实现图片和字体资源打包

  • 作用：图片和字体资源打包

  • 配置：

    • 图片资源打包

      module: {
    rules: [
      // 解析打包图片
      {
        test: /\.(png|jpg|gif)$/i,
        // asset可以在asset/inline和asset/resource之间进行切换，文件小于8kb时使用asset/inline，否则使用asset/resource
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8kb
          },
        },
        generator: {
          filename: './images/[name][ext]',
        },
      },
    ],
  },

      image.png

      image.png

    • 字体资源打包

      // webpack.config.js
module: {
    rules: [
      // 解析打包字体
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        // asset可以在asset/inline和asset/resource之间进行切换，文件小于8kb时使用asset/inline，否则使用asset/resource
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
        generator: {
          filename: 'fonts/[name][ext]',
        },
      },
    ],
},

      // main.less
@font-face {
    font-family: "AlimamaFangYuanTiVF-Thin";
    src: url('./fonts/AlimamaFangYuanTiVF-Thin.ttf') format('truetype');
}

.web-font {
    font-family: "AlimamaFangYuanTiVF-Thin" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
}

      // index.html
<div class="web-font">字体测试</div>

  • 效果：

    image.png

    字体来源：阿里巴巴普惠体 (alibabafonts.com)

五、提高开发效率 - 开发服务器

5.1 热更新

  • 安装：

    npm i webpack-dev-server -D

  • 配置：

    // webpack.config.js
module.exports = {
    // 开发服务器
    devServer: {
        // 告诉服务器从哪里提供内容
        static: {
          directory: resolve(__dirname, 'output'),
        },
        // 打开自动更新
        liveReload: true,
        // 打开gzip压缩
        compress: true,
        // 指定端口号
        port: 8888,
    },

    // 指定构建的环境
    target: 'web',
}

    // package.json
  "scripts": {
    "server": "webpack server",
  },

  • 效果：

    执行命令npm run server: 箭头所指方向就是，本地服务器的地址，点击可直接在浏览器打开，然后更改文件，会发现页面同时被刷新

    image.png

5.2 配置接口代理（proxy）

  • 作用：解决接口跨域问题

  • 配置：

    // webpack.config.js
module.exports = {
    // 开发服务器
    devServer: {
        proxy: {
          '/api': {
            // 访问的目标地址
            target: 'https://XXX',
            // 如果不希望传递/api，则需要重写路径
            pathRewrite: { '^/api': '' },
            // 访问https时需要配置
            secure: false,
          },
          // 覆盖源主机名
          changeOrigin: true,
        },
    },

    // 指定构建的环境
    target: 'web',
}

DevServer | webpack 中文文档 (docschina.org)

报错

由于在实践过程中，webpack@5.94.0 这个版本与好些插件的最新版本都不兼容（看日志这个版本是2024/08/22发布的），所以对webpack的版本进行了降级处理，后续使用的版本是 5.90.0。

在安装 optimize-css-assets-webpack-plugin 时，依然不兼容，我就强安装了npm i optimize-css-assets-webpack-plugin -D --legacy-peer-deps

1. Cannot find package '@babel/plugin-proposal-object-rest-spread'

image.png

解决方案：缺什么补什么

npm i @babel/plugin-proposal-object-rest-spread -D

2. presets属性配置错误

image.png

解决方案：按照提示修改

avatar
文章
阅读
粉丝