設置我的webpack配置時遇到一些麻煩

我正在關注一些教程，但主要是Dan Abramov關於設置反應熱載入程序的教程，但我遇到了一些問題。我想我有一個基本的配置工作，組件的熱但重裝似乎並沒有工作，所以很明顯的熱點裝載機設置是錯誤的:(設置我的webpack配置時遇到一些麻煩

當我改變一個組成部分，我的瀏覽器控制檯日誌這樣的：

The following modules couldn't be hot updated: (Full reload needed) 
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details. 
- ./app/components/Home/index.jsx

要開始了，這裏是我的文件結構：

. 
|++[app] 
|----[actions] 
|----[modules] 
|----[reducers] 
|----[store] 
|----index.html 
|----index.js 
|--[config] 
|----server.js 
|----webpack.config.js 
|--[node_modules] 
|--package.json

這裏是我的WebPack配置：

var webpack = require('webpack'); 
var path = require('path'); 
var autoprefixer = require('autoprefixer'); 
var isProd = process.env.NODE_ENV === 'production'; 

module.exports = { 
    devtool: isProd ? null : 'source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    path.resolve('app/index.js') 
    ], 
    output: { 
    path: path.resolve('dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    resolve: { 
    root: path.resolve('app/'), 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loaders: [ 
      'babel' 
     ], 
     include: path.resolve('.'), 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(png|jpg)$/, 
     loader: 'file-loader?name=img/[name].[ext]' 
     }, 
     { 
     test: /\.scss$/, 
     loader: 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!postcss!sass' 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    postcss: [ 
    autoprefixer({ browsers: ['last 3 versions'] }) 
    ] 
};

而且我server.js

var webpack = require('webpack'); 
var webpackDevMiddleware = require('webpack-dev-middleware'); 
var webpackHotMiddleware = require('webpack-hot-middleware'); 
var config = require('./webpack.config'); 
var path = require('path'); 
var app = new (require('express'))(); 
var port = 3000; 

var compiler = webpack(config); 
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })); 
app.use(webpackHotMiddleware(compiler)); 

app.get('/*', function(req, res) { 
    res.sendFile(path.resolve('app/index.html')); 
}); 

app.listen(port, function(error) { 
    if (error) { 
    console.error(error); 
    } else { 
    console.info('started on localhost://%s.', port); 
    } 
});

來源

2016-10-01 user1354934

你有沒有考慮過使用https://github.com/facebookincubator/create-react-app？ –

我想學習webpack的基礎知識，因爲我之前使用類似的東西： – user1354934

的react-hot裝載機您module.loaders陣列中丟失。 More into this。

接下來我們需要告訴Webpack使用React Hot Loader作爲組件。如果您爲React配置了Webpack，則可能已經使用babel-loader（例如6to5-loader）或jsx-loader來處理JS（X）文件。在webpack.config.js中找到該行，並在其他加載器之前放入反應熱。

所以，你需要你的babel裝載機前添加react-hot裝載機，就像這樣：

{ 
    test: /\.jsx?$/, 
    loader: 'react-hot', 
    exclude: /node_modules/ 
}

，你也需要安裝react-hot-loader模塊，如果你還沒有準備好。

npm i -D react-hot-loader

來源

2016-10-01 18:40:09 dzv3

謝謝！我實際上已經安裝了，但是文檔說要把它放到babelrc文件中，我嘗試了你做的，但後來我得到了警告，我應該把它放到我做的babelrc中。 – user1354934

你是否使用了新的react-hot-loader 3.0版本？看起來像module.loaders到.babelrc migration for react-hot只適用於v3記錄[這裏]（https://github.com/gaearon/react-hot-loader/tree/next-docs/docs）。還有一個[react-hot-boilerplate v3]（https://github.com）/gaearon/react-hot-boilerplate/tree/next）回購你可以從 – dzv3

謝謝我會在那裏看看！ – user1354934

設置我的webpack配置時遇到一些麻煩

回答

相關問題