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

 

• 提升开发效率的利器

每次改完代码都需要重新打包⼀次，打开浏览器，刷新⼀次，很麻烦 , 我们可以安装使⽤ 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进行访问。

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

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

修改 index.js

 

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

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

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

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