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",
    //服务器根目录的位置:<script type=text/javascript src="/static/js/manifest.3ad1d5771e9b13dbdad2.js">
    //assetsPublicPath: "/",
    //服务器根目录的位置:<script type=text/javascript src="./static/js/manifest.3ad1d5771e9b13dbdad2.js">
    assetsPublicPath: "./"
  }

2. css中图片的路径问题，因为CSS使用插件ExtractTextPlugin生成单独CSS文件,所以utils文件中配置一下，加载编译时的规则

       /**
        * 1.options.use:指需要什么样的loader去编译文件
   
           2.options.fallback:编译后用什么loader来提取css文件
   
           3.options.publicfile:用来覆盖项目路径,生成该css文件的文件路径
        */
       if (options.extract) {
         return ExtractTextPlugin.extract({
           use: loaders,
           fallback: 'vue-style-loader',
           publicPath: '../../'
         })
       } else {
         return ['vue-style-loader'].concat(loaders)
       }
   

   3. 动态的图片赋值,因为url-loader/file-loader不会处理，所以.可以使用require的形式

      {imgsrc: require("../../../static/images/智能数仓.png")}
      

   4. 拓展

   ExtractTextWebpackPlugin插件属性

   newExtractTextPlugin(options:filename|object):

   1.id:此为插件的唯一标识，默认为自动生成。

   2.filename:定义文件的名称。如果有多个入口文件时，应该定义为：[name].css。

   3.allChunks:当使用 CommonsChunkPlugin 并且在公共 chunk 中有提取的 chunk（来自ExtractTextPlugin.extract）时，allChunks **必须设置为 true。

   4.ignoreOrder:禁用顺序检查 (这对 CSS 模块很有用！)，默认 false。

   5.disable:禁用插件

   ExtractTextPlugin.extract(options:loader|object)

   1.options.use:指需要什么样的loader去编译文件

   2.options.fallback:编译后用什么loader来提取css文件

   3.options.publicfile:用来覆盖项目路径,生成该css文件的文件路径