webpack高级配置与优化详解

为什么 webpack 会存在跨域问题？因为 webpack 打包的是前端代码，其最终会被部署到前端服务器上，而前后端代码通常部署在不同的服务器上，即使是部署在同一个服务器上，所使用的端口也是不一样的，当前端代码通过 ajax 等手段向后端服务器获取数据的时候，由于前后端代码不在同一个域中，故存在跨域问题。

比如，我们通过 webpack 的 devServer 来运行部署我们的前端应用代码，devServer 启动在 8080 端口上，而前端应用代码中会通过 ajax 请求后端数据，后端服务器启动在 3000 端口上。

// index.js const xhr = new XMLHttpRequest(); // xhr.open("get", "http://localhost:3000/api/test"); // 由于跨域问题无法直接访问到:3000下的资源 xhr.open("get", "/api/test"); // 本来是要访问:3000/api/test xhr.onreadystatechange = () => { if (xhr.readyState === 4) { console.log(xhr.responseText); } } xhr.send();

由于前端代码是运行在浏览器中的，如果在前端代码中直接通过 ajax 向:3000/api/test 发起请求获取数据，那么由于浏览器同源策略的影响，会存在跨域的问题，所以必须访问 /api/test。但是这样访问又会出现 404 问题，因为其实访问的是 :8080/api/test，8080 服务器上是没有该资源的，解决办法就是通过 devServer 配置一个代理服务器

module.exports = { devServer: { proxy: { "/api": "http://localhost:3000" // 路径以/api开头则代理到localhost:3000上 } } }

访问 :8080/api/test 

就会被代理到:3000/api/test 上，proxy 还支持路径的重写，如果 3000 端口服务器上并没有 /api/test 路径，只有 /test 路径，那么就可以对路径进行重写，将 /api 替换掉

module.exports = { devServer: { proxy: { "/api": { target: "http://localhost:3000", pathRewrite: {"/api": ""} // 将/api替换掉 } } } }

访问 :8080/api/test 

就会被代理到 :3000/test 上

如果前端只是想 mock 一些数据，并不需要真正的去访问后台服务器，那么我们可以通过 devServer 提供的 before 钩子函数获取到内置的服务器对象进行处理请求，这个内置的服务器对象就是 webpack 的 devServer 即 8080 端口的 server，因为是在同一个服务器中请求数据所以也不会出现跨域问题。

before(app) { // 此app即webpack的devServer app.get("/api/test", (req, res, next) => { res.json({name: "even"}); }) }

我们还可以不通过 webpack 提供的 devServer 来启动 webpack，而是使用自己服务器来启动 webapck。

const express = require("express"); const app = express(); const webpack = require("webpack"); // 引入webpack const config = require("./webpack.config.js"); // 引入配置文件 const compiler = webpack(config); // 创建webpack的编译器 const middleWare = require("webpack-dev-middleware"); //引入webpack的中间件 app.use(middleWare(compiler)); // 将compiler编译器交给中间件处理 app.get("/api/test", (req, res, next) => { res.json({name: "lhb"}); }); app.listen(3000);

通过自定义服务器启动 webpack，这样 webpack 中的前端代码请求数据就和服务器的资源在同一个域中了。

六、resolve 配置

resolve 用于配置模块的解析相关参数的，其属性值为一个对象。

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!