webpack devServer 热加载没用？

发布于 2022-09-04 10:23:11 字数 940 浏览 10 评论 0

//webpack.config.js
     devtool: 'eval-source-map',

    entry: __dirname + "/component/index.js",

    output:{
        path:__dirname+'/bundle',
        filename:'bundle.js'
    },

    devServer:{
        colors:true,
        historyApiFallback:true,
        inline:true,
        hot:true,
        port:9000
    },
    
    //package.json
     "start": "webpack-dev-server --inline --hot --content-base"

文件目录如下
图片描述

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="__react-content"></div>
    <script src="../bundle/bundle.js"></script>
</body>
</html>

我发现每次修改文件后终端会显示重新打包是不是html引入有问题？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

走走停停 2022-09-11 10:23:11

为啥没用？没用的表现是啥？

回复收藏 0

小ぇ时光︴ 2022-09-11 10:23:11

先确定自己webpack-dev-server这个插件下载没。。

然后在config.js中，加

**var webpack = require('webpack');**

module.exports = {

    entry: __dirname + "/component/index.js",

    output:{
        path:__dirname+'/bundle',
        filename:'bundle.js'
    },
   
    **plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],**
    devServer:{
        colors:true,
        historyApiFallback:true,
        inline:true,
        hot:true,
        port:9000
    },

}
应该就可以了，localhost:9000/就是启动后的页面

回复收藏 0

献世佛 2022-09-11 10:23:11

看你的配置webpack.config.js文件好像确实一些必要的配置，

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js',
        // publicPath:'./' //打包后的路径引用问题，
    },
   ....
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(true), //热更新替换插件
        new webpack.HotModuleReplacementPlugin(),     //替换 webpack-dev-server
    ],
    devServer: {
        contentBase: "./build",//本地服务器所加载的页面所在的目录
        colors: true,//终端中输出结果为彩色
        historyApiFallback: true,//不跳转
        inline: true,//实时刷新
        hot: true,
        port:"7000",
        Info:true
    }
};

你可以这样配置文件试试，记得在入口文件配置'webpack/hot/dev-server'

回复收藏 0

一笔一画续写前缘 2022-09-11 10:23:11

因为我之前使用了webpack命令生成了bundle,js文件，然后index.html一直在调用bundle.js对于是相对于index.html存在的真实文件，webpack-dev-server打包的是一个内存文件，他没有去访问者所以才导致的这个情况

<script src="http://localhost:9000/webpack-dev-server.js"></script>
    <script src="http://localhost:9000/bundle.js"></script>

回复收藏 0

寒冷纷飞旳雪 2022-09-11 10:23:11

webpack.config.js

entry    : {
        main: [
            './app/app.js',
            'webpack-dev-server/client?http://localhost:8089',
            'webpack/hot/only-dev-server'
        ]
    },
    output   : {
        publicPath: 'http://localhost:8089/',
        filename: './dist/js/bundle.js'
    },

index.html中添加

<script src="http://localhost:8089/webpack-dev-server.js"></script>

具体可以看看我的项目https://github.com/Hancoson/r...

回复收藏 0

~没有更多了~

关于作者

在你怀里撒娇

暂无简介

0 文章

0 评论

21 人气

关注发私信

qq_FjTq5B

文章 0 评论 0

关注

18273202778

文章 0 评论 0

关注

WordPress小学生

文章 0 评论 0

关注

〃温暖了心ぐ

文章 0 评论 0

关注

迷乱花海

文章 0 评论 0

关注

niuniu

文章 0 评论 0

友情链接

文江博客

webpack devServer 热加载没用？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

webpack devServer 热加载没用？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。