深入学习如何配置自己的Webpack-dev-server

素颜马尾好姑娘i 2024-04-18 02:55 58阅读 0赞

大部分项目中都会用的webpack，但是很多人并不知道如何配置属于自己的webpack-devsever，深入了解webpack自动化对我们优化项目，提升自己的水平有很大帮助，下面是我自己总结的一点关于webpack的基本配置，与大家分享。

**第一部分-----首先看一下webpack中一些简单的配置**

devtool:'cheap-source-map',//配置Source-map
    devServer:{
        port:9002,//端口
        overlay:true,//是否在代码错误时使用遮罩
        hot:true,//热更新
        hotOnly:true//全局热更新
        proxy:{//接口代理
            "/":{//碰到"/"开始转发
                target:'https://mooc.study.163.com',//转发的主域名
                changeOrigin:true,//改变源
                pathRewrite：{//简写用api代替后面的内容
                    "^/api":"/smartSpec/detal/1202816603.htm"
                }
            }
        }
    },
    plugins:[
        //在加入hot的时候，要在plugins中加入如下内容
        new webpack.HotModuleReplacementPlugin()
    ]

hot:true,  
在使用：hotOnly：true的时候，js的热更新需要加入module.hot.accept()才能使其生效，不加的话无法热更新。

document.getElementById('mydiv).innerHTML = '123'
    module.hot.accept()

proxy：原理是转发请求到node，载让node进行服务器请求，在开发环境可以使用，实际运行环境时，可以让后台设置响应头，cors或者ngex代理即可  
2.Source-map  
可以方便查看代码压缩/打包前所在的位置，源码的位置，在js，css要分别开启才能使用，共有7种模式

**第二部分----自己搭建devsever**  
1。创建dev.js文件  
2。需要安装的启动器和中间件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwMzg1MA_size_16_color_FFFFFF_t_70]  
3。代码

const express = require('express');
    const webpackDevMid = require('webpack-dev-middleware');
    const webpackHotMid = require('webpack-hot-middleware');
    const webpack = require('webpack');
    const config= require('./webpack.config.js');
    const app = express();
    Object.keys(config.entry).forRach(function(){
        config.enrty[name] = ['webpack-hot-middleware/client?noInfo=true&reload=true'].concat(config.entry[name])
        //['webpack-hot-middleware/client?noInfo=true&reload=true','./app.js']
    })
    var compiler = webpack(config);
    
    app.use(
        webpackHotMid(compiler,{
            overlayStyles:true,
        })
    )
    app.listen(2007);//端口号

这样一个简单的Webpack-dev-server就完成啦，希望对大家有用~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwMzg1MA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3cf1b208d644472b996fe48f60856938.png