webpack关于devserver proxy配置 hmr配置

• 目录

  
  
  捕获.JPG
• 让文件改动时webpack自动打包
  • package.json scripts添加

    "webpackwatch": "webpack --watch",

npm run webpackwatch

• 使用devserver开启服务
  • package.json scripts添加

 "dev": "webpack-dev-server"

npm run dev

webpack.config.js配置

devServer:{
        contentBase:'./dist', //script webpack-dev-server  服务的根路径
        open:true,//自动打开浏览器,
        hot:true
    },

• 配置hmr
  开启时当html开发时只更改样式 js进行的操作数据不会丢失，浏览器只会局部刷新样式
  • webpack.config.js

      const path = require('path')
      const HtmlWebpackPlugin = require('html-webpack-plugin')
      const {CleanWebpackPlugin}= require('clean-webpack-plugin')
      const webpack = require('webpack');
     devServer:{
        contentBase:'./dist', //script webpack-dev-server
        open:true,//自动打开浏览器,
        hot:true,
     },
         plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(
            {
                title:'learnWebpack',
                filename:'index.html',
                template:'./index.html'
            }
        ),
       new webpack.HotModuleReplacementPlugin(),
    ]
    

• 代理
  发送ajax请求时，如果匹配则会转发，可以代理跨域

devServer:{
        contentBase:'./dist', //script webpack-dev-server
        open:true,//自动打开浏览器,
        hot:true,
        // hotOnly:true,//hmr
        proxy:{
            '/api':"localhost:3000", //如果请求  /api/login    则会加上localhost:3000/api/login
            changeOrigin: true,//跨域
        }
        // proxy: {
        //     '/api': {
        //         target: 'http://localhost:3000',
        //         pathRewrite: {'^/api' : 'redict'}
        //     }    发送  localhost:3000/redict/login
        // }
        // proxy: [{
        //     context: ['/auth', '/api'],
        //     target: 'http://localhost:3000',也可以这样匹配多个
        // }]
    },

github地址