webpack 在移动端适配 px 转rem，以及内联手淘的 flexible 库

最新推荐文章于 2023-07-04 01:26:17 发布

素燃

最新推荐文章于 2023-07-04 01:26:17 发布

阅读量949

点赞数

分类专栏： webpack4.0 文章标签： webpack

总结不易，转载请说明出处哦!

本文链接：https://blog.csdn.net/qq_36407748/article/details/100633209

版权

webpack4.0 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

移动端开发中，我们都需要做尺寸处理来适配各种手机型号

简单记录一下， webpack 自动处理 px转rem，而我们只需要根据设计稿尺寸写px 单位就好

1. 安装 lib-flexible

yarn add lib-flexible

2. 安装 px2rem-loader

yarn add px2rem-loader

3. 安装 raw-loader@0.5.1

yarn add raw-loader@0.5.1

配置webpack.config.js

  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader"
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader",
          {
            loader: "px2rem-loader",
            // options here
            options: {
              remUni: 75,
              remPrecision: 8
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {}
          }
        ]
      }
    ]
  },

内联手淘库到页面，由于这个库的代码要在一加载页面就执行，所以放最前边

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script>
      ${require("raw-loader!babel-loader!./node_modules/lib-flexible/flexible.js")}
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

素燃

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack 在移动端适配 px 转rem，以及内联手淘的 flexible 库

移动端开发中，我们都需要做尺寸处理来适配各种手机型号简单记录一下， webpack 自动处理 px转rem，而我们只需要根据设计稿尺寸写px 单位就好1. 安装 lib-flexibleyarn add lib-flexible2. 安装 px2rem-loaderyarn add px2rem-loader3. 安装raw-loader@0.5.1...
复制链接

扫一扫