webpack4系列第七篇(跨域处理与resolve配置)

跨域处理暂时先只介绍用proxy解决跨域问题,先上代码:

    devServer:{ //开发服务器配置
        ...
        proxy: {
            '/api': {
                target: 'http://www.xxx.com',
                pathRewrite: {
                    '^/api': ''//需要rewrite重写
                }
            },
        }
         ...
    },

代理的意思是,遇到/api开头的接口则向http://www.xxx.com服务器上去找,这个/api地方可以是任意其他前端自己拼在后端给的实际接口前面,根据实际情况进行rewrite重写即可。
举个例子:后端给的接口是/api/user,则此时的重写应该不变:

                pathRewrite: {
                    '^/api': '/api'
                }

最终请求后台是http://www.xxx.com/api/user
如果后端给的接口是/user,前端可以在接口的前面自己拼一个/api,则此时的重写应该是这样:

                pathRewrite: {
                    '^/api': ''
                }

最终请求后台是http://www.xxx.com/user
自己拼上的,最终要rewrite掉。

resolve:

配置模块如何解析。例如,当在 ES2015 中调用 import 'lodash',resolve 选项能够对 webpack 查找 'lodash' 的方式去做修改。列几个比较常用的选项:

module.exports = {
    ...
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          '@': path.resolve(__dirname,'./src'),
        },
        modules:['node_modules'],
        mainFields: ['browser', 'module', 'main']
    }
    ...
}
alias:

创建 import 或 require 的别名,来确保模块引入变得更简单。如果之前这样写:

import validate from '../../src/validate'

现在可以这样写:

import validate from '@/validate'

@符就代表了src的路径。
也可以在给定对象的键后的末尾添加 $,以表示精准匹配:

alias: {
      xyz$: path.resolve(__dirname, 'path/to/file.js')
}

这将产生以下结果:

import Test1 from 'xyz'; // 精确匹配,所以 path/to/file.js 被解析和导入
import Test2 from 'xyz/file.js'; // 非精确匹配,触发普通解析
mainFields:

当从 npm 包中导入模块时,此选项将决定在package.json(导入模块中的) 中使用哪个字段导入模块。
例如,考虑任意一个名为 upstream 的 library,其 package.json 包含以下字段:

{
  "browser": "build/upstream.js",
  "module": "index"
}

在我们 import * as Upstream from 'upstream' 时,这实际上会从 browser 属性解析文件。在这里 browser 属性是最优先选择的,因为它是 mainFields 的第一项。同时,由 webpack 打包的 Node.js 应用程序首先会尝试从 module 字段中解析文件。

extensions:

这个选项是扩展名的意思,用来解决省略后缀名的,默认值:

module.exports = {
  //...
  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json']
  }
};

比如当你写vue,引用一个vue组件import xxx from '@/components/Header'不带后缀名,则可以这样配置:

module.exports = {
  //...
  resolve: {
    extensions: ['.js','.css' ,'.json','.vue'] 
  }
};

按照顺序依次解析。

modules:

告诉 webpack 解析模块时应该搜索的目录。不加这个选项的话,webpack会一直向上搜索。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 每天进步一点点点点点点点点点点点点点点点点点点点点点点点点点点点点点点~~从开始只能写几句话、模仿别人的观点,到现...
    一个帅气的名字呀阅读 18,245评论 4 31
  • # Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列...
    小迈克阅读 3,041评论 1 3
  • 儿子的上门牙活动了好久了,今天,嘴里一直喊疼,一看,牙都歪了,一笑特想像赛车总动员里的板牙,呵呵,我一笑,孩子不高...
    有爱的七星瓢虫阅读 1,719评论 1 2
  • 今天我读了一篇叫做农夫留下来的宝贝。也想给大家讲一讲。 从前有一个勤劳的农夫,他有三个懒惰的儿子,有一天农夫生病了...
    崔珂豪本人阅读 1,659评论 0 3
  • 第二十七回 金宝与德秀漫步在后苑的荷花池边。此刻,天高气爽,一对璧人清清爽爽地走在水面清圆、一一风荷举的曼妙天地,...
    文艺污小姐阅读 269评论 0 0