postcss webpack 1 配置 #1101
Description
Environment(required) | 环境（必填）
- antd-mobile version（antd-mobile版本）:1.0.5
- Browser (or mark react-native) and its version（浏览器或react-native版本）:chrome
- Operating environment (e.g. OS name) and its version（操作系统版本或设备型号）:mac 10.12.3
What did you do? Please provide steps to re-produce your problem.（请提供复现步骤）
1.在index.html head中添加了以下代码：
<script>
!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);
flex(100, 1);
</script>2.在webpack中添加了postcss-pxtorem（我的是create-react-app 创建的）
'use strict';
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
var getClientEnvironment = require('./env');
var paths = require('./paths');
var pxtorem = require('postcss-pxtorem');
const svgDirs = [
require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件
// path.resolve(__dirname, 'src/my-project-svg-foler'), // 2. 自己私人的 svg 存放目录
];
var publicPath = '/';
var publicUrl = '';
var env = getClientEnvironment(publicUrl);
module.exports = {
devtool: 'cheap-module-source-map',
entry: [
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
paths.appIndexJs
],
output: {
path: paths.appBuild,
pathinfo: true,
filename: 'static/js/bundle.js',
publicPath: publicPath
},
resolve: {
fallback: paths.nodePaths,
extensions: ['', '.web.js', '.js', '.json'],
alias: {
'react-native': 'react-native-web'
}
},
module: {
preLoaders: [
// {
// test: /\.(js|jsx)$/,
// loader: 'eslint',
// include: paths.appSrc,
// }
],
loaders: [
{
exclude: [
/\.html$/,
/\.(js|jsx)(\?.*)?$/,
/\.css$/,
/\.json$/,
/\.svg$/
],
loader: 'url',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
},
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: {
"plugins": [["import", { "style": "css", "libraryName": "antd-mobile" }]],
cacheDirectory: true
}
},
{
test: /\.css$/,
loader: 'style!css?importLoaders=1!postcss',
postcss: [
pxtorem({
rootValue: 100,
propWhiteList: [],
})
]
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(svg)$/i,
loader: 'svg-sprite',
include: svgDirs, // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理
},
]
},
// We use PostCSS for autoprefixing only.
postcss: function () {
return [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
]
}),
];
},
plugins: [
new InterpolateHtmlPlugin(env.raw),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules)
],
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};What do you expected?（预期的正常效果）
自动适配屏幕
What happen?（发生了何种非正常现象）
iphone6下的和iphone6p下差别较大（iphone6p下 缩小过度）
（怕图片出不来，贴了个地址）
http://wxshop-auto.oss-cn-shanghai.aliyuncs.com/img/iphone-img.png
