移动端适配方案

• rem
• 媒体查询
• vw,vh（安装postcss-px-to-viewport插件后进行简单配置就可以在页面直接使用px单位，项目编译后自动转换为对应的vw或vh属性）

npm install postcss-loader autoprefixer postcss-px-to-viewport --save
以375px分辨率为例，100vw=375px，是宽度1%，1vm=3.75px

#app{
	font-size: 18px;
	color: #FFA500;
	border: 1px dashed #4169E1;
}
.ignore{
	color: antiquewhite;
	font-size: 8px;
}
@media only screen and (min-width: 100px) and (max-width: 640px) {
	#app{
		font-size: 18px;
		color: #FFA500;
		border: 1px dashed #4169E1;
	}
	.ignore{
		color: antiquewhite;
		font-size: 8px;
	}
}

const path=require('path');
const webpack=require('webpack');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin');//npm install extract-text-webpack-plugin@next --save
const optimizeCss = require('optimize-css-assets-webpack-plugin');

module.exports={
  entry:{
    'app':'./entry/app-css.js',
  },
  output:{
    path: path.resolve(__dirname, "output"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  },
  module:{
    rules:[
      {
        test:/\.js?$/,
        exclude:/(node_modules)/,
        loader:'babel-loader'
      },
      {
        test:/\.css?$/,
        exclude:/(node_modules)/,
        loaders:ExtractTextWebpackPlugin.extract({
          //转换.css文件需要使用的Loader
          use:[
            {
              loader:'css-loader'
            },
            {
              loader:'postcss-loader',
              options: {
		    	plugins: ()=>[
		        	require('autoprefixer')({
		        		browsers: ['last 5 versions']
		        	}),
		        	require('postcss-px-to-viewport')({
			        		viewportWidth: 375,
			        		viewportHeight: 1334,
			        		unitPrecision: 3,
			        		viewportUnit: 'vw',
			        		selectorBlackList: ['.ignore', '.hairlines'],
			                minPixelValue: 1,
			                mediaQuery: false
		        		})
		    		]
				}
            }
          ]
        }),
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./index.html'
    }),
    new ExtractTextWebpackPlugin({
      filename: '[name].min.css',
    }),
  ],
  devServer: {
    //contentBase:path.join(__dirname,'./release'),
    open:true,//自动打开浏览器
    port:9001,
    disableHostCheck: true
  }
}

/*
viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false     // 允许在媒体查询中转换`px`
*/

{
  "name": "webpackhigh",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config-es6.js",
  "dependencies": {
    "autoprefixer": "^9.6.1",
    "awesome-typescript-loader": "^5.2.1",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^2.1.0",
    "cssnano": "^4.1.8",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-inline-chunk-plugin": "^1.1.1",
    "html-webpack-plugin": "^3.2.0",
    "img-loader": "^3.0.1",
    "imports-loader": "^0.8.0",
    "jquery": "^3.3.1",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "lodash": "^4.17.11",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "path": "^0.12.7",
    "postcss": "^7.0.7",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-px-to-viewport": "^1.1.1",
    "postcss-sprites": "^4.2.1",
    "request": "^2.88.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.2",
    "typescript": "^3.2.2",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.28.3",
    "webpack-bundle-analyzer": "^3.0.3",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.2.1"
  },
  "devDependencies": {
    "http-proxy-middleware": "^0.19.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server --env development --mode development  --config ./webpack-css.js",
    "build": "webpack --config ./webpack-css.js --mode production --env production"
  },
  "author": "",
  "license": "ISC"
}