Webpack-dev-server配置开发及跨域解决

谁践踏了优雅 2023-02-19 10:30 19阅读 0赞

*  提升开发效率的利器

每次改完代码都需要重新打包⼀次，打开浏览器，刷新⼀次，很麻烦 , 我们可以安装使⽤ webpackdevserver 来改善这块的体验

*  安装

npm install webpack-dev-server -D

*  配置

修改下package.json

"scripts": {
    	"server": "webpack-dev-server"
     },

在webpack.config.js配置，在原有基础上添加：

devServer: {
     contentBase: "./dist",
     open: true,
     port: 8081
     }

查看 webpack.config.js 文件内全部代码：

// webpack是基于node.js的
    //! 要使用commonjs规范导出一个对象
    
    // commonjs规范
    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const webpack = require("webpack");
    
    
    // ? 单页面入口打包 SPA
    module.exports = {
      // webpack执⾏构建⼊⼝
      
      // 单页面部分
      entry: "./src/index.js",
      // 输出
      output: {
         // 输出到那里，必须为绝对路径
         path: path.resolve(__dirname, "./dist"),
         filename: "main.js",
       },
    
      // 模式
      mode: "development",
      // 处理模块
      module: {
        // 这些loder（加载器）是需要额外安装的
        //! loader 是由执行顺序的，自右往左
        rules: [
          // 处理图片
          {
            test: /\.(png|jpe?g|gif)$/,
            use: [
              {
                loader: "file-loader",
                options: {
                  name: "[name]_[hash:8].[ext]",
                  outputPath: "images/", // 将图片存放在images下
                },
              },
            ],
          },
          {
            test: /\.css$/,
            use: [
              {
                loader: "style-loader",
                options: {
                  // 将多个style标签合并为一个
                  injectType: "singletonStyleTag",
                },
              },
              "css-loader",
            ],
          },
          {
            test: /\.woff2$/,
            use: ["file-loader"],
          },
          {
            test: /\.less$/,
            use: [
              // "style-loader",
              MiniCssExtractPlugin.loader,
              "css-loader",
              "postcss-loader",
              "less-loader",
            ],
          },
          {
            test: /\.js$/,
            exclude: /node_modules/, // 排除
            use: {
              loader: "babel-loader",
            },
          },
        ],
      },
      // devtool: "source-map",  // 一般用于开发环境，生产环境的为none
      devServer: {
        contentBase: "./dist",
        port: 8081,
        open: true,
        // 热替换
        hotOnly: true, // 模块刷新，不会做页面刷新
        // 解决跨域（代理的原理）
        proxy: {
          // 当碰到/api时，直接服务器代理到9092接口
          "/api": {
            target: "http://localhost:9092",
          },
        },
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: "./src/index.html",
          filename: "index.html"
        })
      ]
    };

*  启动

npm run server

启动服务后，会发现 dist ⽬录没有了，这是因为 devServer 把打包后的模块不会放在 dist ⽬录下，⽽是放到内存中，从⽽提升速度

*  本地mock，解决跨域：

联调期间，前后端分离，直接获取数据会跨域，上线后我们使⽤ nginx 转发，开发期间， webpack 就可以搞定这件事启动⼀个服务器， mock ⼀个接⼝：

安装express

npm i express -D

server.js（与package.json同级）

// mock接口数据
    const express = require("express")
    
    const app = express();
    
    
    app.get('/api/info',(req, res) => {
        res.json({
            name: "webpack"
        })
    })
    
    app.listen("9092");

启动模拟服务器

node server.js

然后通过下面的链接查看：

http://localhost:9092/api/info

现在模拟服务器建好了，数据只有name

然后项目安装axios并修改 src/index.js

//npm i axios -D
    
    //index.js
    import axios from 'axios'
    axios.get('http://localhost:9092/api/info').then(res=>{
    	console.log(res)
    })

然后npm run server 运行，存在跨域问题

[http://localhost:8081/index.html][http_localhost_8081_index.html]进行访问。

修改webpack.config.js 设置服务器代理

proxy: {
      // 当碰到/api时，直接服务器代理到9092接口
      "/api": {
    	target: "http://localhost:9092",
      },
    },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

修改 index.js

axios.get("/api/info").then(res => {
         console.log(res);
    }

这样模拟修改的webpack-dev-server添加完成，可以不用每次打包然后刷新，开发更快。

最后在编译窗口上的运行结果为：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1][]

这样，一直处于一个更新状态，无需打包。

[http_localhost_8081_index.html]: http://localhost:8081/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200620114524770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200620120317280.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA==,size_16,color_FFFFFF,t_70