移动端开发中， 我们 都需要做 尺寸处理来适配各种手机型号
简单记录一下， webpack 自动处理 px转rem， 而我们只需要根据设计稿尺寸写px 单位就好
1. 安装 lib-flexible
yarn add lib-flexible2. 安装 px2rem-loader
yarn add px2rem-loader3. 安装 [email protected]
yarn add [email protected]配置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>
