webpack项目重构问题记录

一. PC适配问题

1. 下载插件

   npm install -S lib-flexible （可以使用rem作为单位，在根元素html上设置font-size）

   npm install -D postcss-px2rem (编译运行或者打包时，项目中的px，转换为rem)

2. 修改node_modules中 lib-flexible文件，因为之中的width写死为了540。需要修改一下。

     // 修改文件的此函数  
   	function refreshRem(){
       		//获取页面宽度
           var width = docEl.getBoundingClientRect().width;
           if (width / dpr > 540) {
               //width = 540 * dpr;
               width = width * dpr;
           }
           //如果宽度为1440，则1rem = 144px
           var rem = width / 10;
           docEl.style.fontSize = rem + 'px';
           flexible.rem = win.rem = rem;
       }
   

   3. 引入postcss-px2rem,有两种方式

   ? 方式1：

   ? 在配置文件 .postcssrc.js 中添加

   module.exports = {
     "plugins": {
       "postcss-import": {},
       "postcss-url": {},
       // to edit target browsers: use "browserslist" field in package.json
       "autoprefixer": {},
       //添加此句配置,remUnit为换算单位 1rem = 144px
       "postcss-px2rem": { "remUnit": 144 }
     }
   }
   

二. 打包路径问题

? 1.文件路径问题，打包出来的JS，css文件可以使用，webpack中build的配置去控制

  build: {
    // index.html
    index: path.resolve(__dirname, "../dist/index.html"),
    // 打包后的根目录
    assetsRoot: path.resolve(__dirname, "../dist"),
    //子目录
    assetsSubDirectory: "static",
    //服务器根目录的位置: