Webpack系列-WebpackDevServer

admin 2022年4月24日10:09:36安全工具评论11 views1492字阅读4分58秒阅读模式

作用

WebpackDevServer作用:
0.运行一个服务器并运行与8080端口;
1.实现自动打包 ;(代替npx webpack作用)

安装

yarn add webpack-dev-server

配置

webpack.config.js:

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode'development',
  entry: {
    main'./src/index.js',
  },
  devServer: {
    static'./dist'   //webpack-dev-server配置,表示从哪个目录下面获取数据
  },
  output: {
    filename'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template'./src/index.html',
      cachefalse
    }),
    new CleanWebpackPlugin(),
  ],
};

package.json:

"scripts": {
    "watch""webpack --watch",
    "start""webpack serve"
  },

运行

运行命令:

yarn run start

WebpackDevServer实现请求转发

yarn add axios

更改配置:

devServer: {
    static'./dist',   //webpack-dev-server配置
    proxy: {
      '/users': {
        target'https://api.github.com/',//如果有请求发送到/users这个路径,就转发到api.github.com
        changeOrigintrue
      }
    }
  },

源代码发生的变化:

axios.get('/users/defunkt').then(({data}) => {
  console.log(data);
})

再重新启动一下:

yarn run start

怎样忽略以api为开头的接口中的api字符

proxy: {
      '/api/users': {
        target'https://api.github.com/',//如果有请求发送到/users这个路径,就转发到api.github.com
        pathRewrite:{
          '^/api':''
    },
          changeOrigintrue
      }
    }

再重新启动一下即可;

源代码见: https://github.com/richard1230/CodeLearning/tree/main/Javascript/Webpack/WebpackDevServer


原文始发于微信公众号(迪哥讲事):Webpack系列-WebpackDevServer

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年4月24日10:09:36
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  Webpack系列-WebpackDevServer http://cn-sec.com/archives/937197.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: