HMR sadece bazen günceller

oy
2

Herkes aslında HMR yukarı ve sorunsuz çalışmasını var mı? Mine sıcak bazen sadece takas edilir. Bu nasıl mümkün olabilir? Ben metin satırı düzenlemek edecek ve takas edecek. Sonra aynı metni düzenlemek gidecek ve bunu görmez. Ben WebPack 1.14 kullanıyorum. Online her örnek arama ve yineleme ve benim webpack.config yapılandırılması bu konuda çok fazla zaman harcadım. Bu şey her çalışan bir webpack-dev-sunucu ile kurmak tam olarak nasıl bazı gerçek belgeler olmadan zor. StackOverflow'daki cevaplanmamış soru ve webpack GitHub sorunlar bölümünün tüm sayesinde, kimse gerçekten yaratıcıları ve birkaç gurulara hariç anlar düşünmek istiyorum.

Şöyle bir webpack yapılandırma vardır:

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;

Dosyam yapısı şöyledir:

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

Benim index.jsx gibi görünür:

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)
        });
    }

İşin garip yanı, bir değişiklik yaptığınızda sıcak takas olur bazen. Diğer zamanlarda hiç değil. O anki kurulumu konusunda neden oluyor anlayacak orada bazı bilge internet adaçayı olmadığını sadece merak.

Oluştur 14/01/2017 saat 21:37
kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
2

Ben kullanıyorum gerçi aynı aralıklı HMR sorunu vardı

  • webpack-dev-katman
  • webpack sıcak-katman

HMR bazen çalışıyordu, ben diffs hep saptamayı elde değildi şüpheleniyordu.

Ben Windows üzerinde bu koşuyorum, bu yüzden bu yapılandırmayı ekleyerek çalıştı

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

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

Benim HMR daha tutarlı şimdi algılanır.

Cevap 20/04/2017 saat 20:55
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more