webpack3.8.1 webpack-dev-server 无法实现热更新,官网的例子跟着写一样不行

没事不要用最新版或者webpack3,等于自杀,建议用webpack2,3还是一堆坑。。。
webpack3.8.1 webpack-dev-server 无法实现热更新,官网的例子跟着写一样不行,已经上网找了很多资料,根本不知道是什么原因,难道新版本的问题还是我设置的问题?每次都要手动刷新,是配置哪里设置错了?折腾了一晚上。说漏了关键点,index.html文件是静态文件,引入build.js的,index.html文件不在watch中。。。翻到论坛中的一篇文章的作者说到

clipboard.png

官网的文档:https://doc.webpack-china.org...
已经使用webpack --watch 监听,但奇怪的是每次修改文件都会生产多一个js和json
如下面这样

0.a3bbf6cf39dcba749b38.hot-update.js
a3bbf6cf39dcba749b38.hot-update.json

好像设置了publicPath为下面那样才会有热更新log日志输出
版本环境,编辑器已关闭安全模式

"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.5"

webpack.config.js

const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: './css.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'build.js',
        // publicPath: "http://localhost:8080/dist" 
    },
    module: {
        rules: [
            {
            test: /\.css$/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader",
                    options: { importLoaders: 1 }
                },
                {
                    loader: "postcss-loader"
                }
            ]
        }
        ]
    },
    devServer: {
        contentBase: './',
        hot: true,
        inline: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        //new webpack.NamedModulesPlugin()
    ]
}

执行命令

"start": "webpack-dev-server --inline --hot --open"
阅读 7.5k
3 个回答

翻了一堆资料终于发现问题在哪里了!!!看了很多文章都没怎么说这个路径是怎么回事,现在算是搞清楚了。
首先devServerpublicPath路径是指向内存生产的路径,不在物理硬盘上,所以我的index.html里面引用的
js路径,应该相对于publicPath地址。
注意:publicPath地址默认不写会读取output的publicPath路径,publicPath总是以‘/’开头。
网上也说建议devServerpublicPathoutputpublicPath一致。最好是相对路径?不清楚网上说法不一。
修正文件写法:

devServer: {
        publicPath: '/', //注意这里,相应看html的引用路径为如果写 /test/,那么引用就是 /test/+ 资源文件名
        contentBase: './',
        historyApiFallback: true,
        open: true,
        inline: true
    },
//命令
es6": "webpack-dev-server --config webpack.es6.js --inline --open"
<body>
    <h1>...</h1>
    <!-- 
    build.js的路径是相当于publicPath,
    之前不能更新是我一直写了webpack watch 出来的 dist/build.js 中的路径,真是大错特错了。
    -->
    <script src="build.js"></script>
</body>

另外如果引入的css文件报错 import './index.css'
试试require('./index.css')引入方式
现在终于修改文件可以实现自动刷新了。。。踩过的坑才会印象深刻~/(ㄒoㄒ)/~~

"start": "webpack-dev-server --inline --hot --open" 加上要执行的文件
"start": "webpack-dev-server --config webpack.config.js --inline --hot --open"
还有你可以devSever里面配--inline --hot --open
devServer: {

    contentBase:'./',
    open: true,
    inline: true,
    hot: true,
    historyApiFallback: true,
    port: 8080
},
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏