2

有没有人真正拥有 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)
        });
    }

奇怪的是，当我进行更改时，有时会发生热插拔。其他时候根本没有。只是想知道是否有一些聪明的互联网圣人会理解为什么当前设置会发生这种情况。

4

1 回答 1

2

我有同样的间歇性 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 现在被更一致地检测到了。

于 2017-04-20T21:55:37.837 回答