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会一直向上搜索。