Question

我正在尝试使用Hot Loader。我已安装Hot Loader并按照文档http://gaearon.github.io/react-hot-loader/getstarted/中的所有步骤操作。然后我给＆＃34; npm start＆＃34;命令到终端。但终端抛出错误。我无法看到我在组件中所做的更改会在浏览器中反映出来。

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devServer: {
        inline: true,
        contentBase: './src',
        port: 3000
    },
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'webpack-dev-server/client?http://localhost:3000', // WebpackDevServer host and port
        'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
        './dev/js/index.js' // Your appʼs entry point
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot','babel'],
                exclude: /node_modules/
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    },
output: {
        path: 'src',
        filename: 'js/bundle.min.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
};

Package.json的脚本部分

"scripts": {
    "dev": "webpack",
    "start": "node server.js"
  },

server.js

var webpack = require('webpack');
var webpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
var port = 3000;
var compiler = webpack(config);

new webpackDevServer(compiler, {
    publicPath: config.output.publicPath,
    hot:true,
    stats:{colors:true}
}).listen(port, 'localhost', function (err, result) {
    if(err){
        console.log(err);
    }
    console.log('listening at localhost' + port);
});

很少有人排队 1.我的server.js文件是否正常。 2.我是否在package.json中的脚本中正确包含了所有内容。 3.＆＃34; npm start＆＃34;启动热装载程序的命令。 4.即使在＆＃34; npm start＆＃34;之后收到错误，我也可以启动我的应用程序在浏览器中单击chrome图标。是什么原因。 5.我应该在这些文件中更改什么才能获得正常工作的热装载程序。

热装载机不工作

0 个答案: