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;
        }
    
    1. 引入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: "./"
  }
  1. 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)
        }
    
    1. 动态的图片赋值,因为url-loader/file-loader不会处理,所以.可以使用require的形式

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

    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文件的文件路径

posted @ 2021-08-04 15:08  小L同学  阅读(74)  评论(0编辑  收藏  举报