Question

有没有人真正拥有HMR并且运行顺畅？我的热交换有时只是。怎么可能？我将编辑一行文本，它将交换。然后我将编辑相同的文本，它将无法看到它。我正在使用webpack 1.14。我花了太多时间在网上搜索每个例子并重做和配置我的webpack.config。如果没有一些关于如何使用每次都能运行的webpack-dev-server进行设置的真实文档，这件事情很难实现。有了stackOverflow和webpack GitHub发布部分的所有未解答的问题，除了创建者和一些大师外，你认为没有人真正理解它。

我有一个webpack配置，如下所示：

var config = {
    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        // bundle the client for webpack-dev-server
        // and connect to the provided endpoint
        'webpack/hot/only-dev-server',
        // bundle the client for hot reloading
        // only- means to only hot reload for successful updates
        DEV + "/index.jsx"],
    output: {
        path: OUTPUT,
        filename: "app.js",
        publicPath: '/',
    },
    devtool: 'inline-source-map',
    devServer: {
        hot: true,
        // enable HMR on the server
        contentBase: OUTPUT,
        // match the output path
        publicPath: '/'
        // match the output `publicPath`
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
        new webpack.NamedModulesPlugin(),
        /* new webpack.DefinePlugin({
             'process.env': {
                 NODE_ENV: JSON.stringify('production')
             }
         }),
         new webpack.optimize.UglifyJsPlugin()*/
    ],
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                include: DEV,
                loaders: ["react-hot", "babel-loader"],
            },
            {
                test: /\.css$/,
                loader: 'style-loader'
            }, {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ],
    }
};

module.exports = config;

我的文件结构是：

-> EZTube
   -> dev
       ->TabComponent
           ->other source code files 
       ->index.jsx
   -> output
       ->app.js
       ->index.html
       ->styles.css
   -> webpack.config.js
   -> package.json

我的index.jsx看起来像是：

import React from "react";
import ReactDOM from "react-dom";
import TabComponent from './TabComponent/TabComponent.jsx';
import { AppContainer } from 'react-hot-loader';



    ReactDOM.render(
        <TabComponent />,
        document.querySelector("#container")
    );

        if (module.hot) {
            module.hot.accept('./TabComponent/TabComponent.jsx', () => {
            const NewApp = require('./TabComponent/TabComponent.jsx').default
            ReactDOM.render(NewApp)
        });
    }

奇怪的是，当我做出改变时，有时会发生热交换。其他时间根本没有。只是想知道是否有一些聪明的互联网圣人会理解为什么会发生这种情况。

Answer 1

虽然我正在使用

，但我有同样的间歇性HMR问题

的WebPack-DEV-中间件
的WebPack-热中间件

由于HMR有时会工作，我怀疑差异并不总是被发现。

我在Windows上运行它，所以我尝试添加此配置

    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000, //seems to stablise HMR file change detection
        ignored: /node_modules/
    },

https://webpack.js.org/configuration/watch/

我的HMR现在更加一致。

HMR有时仅更新

1 个答案: