2016-10-28 48 views
1

我有以下webpack.config.js:陣營熱裝載機不realoading更改後

"use strict"; 

const debug = process.env.NODE_ENV !== "production"; 

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

module.exports = { 
    devtool: debug ? 'inline-sourcemap' : null, 
    devServer: { 
    inline: true, 
    port: 3333, 
    hot: true, 
    contentBase: "src/static/", 
    historyApiFallback: { 
     index: '/index-static.html' 
    } 
    }, 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000/', 
    'webpack/hot/only-dev-server', 
    './src/app-client.js' 
    ], 
    output: { 
    path: path.join(__dirname, 'src', 'static', 'js'), 
    publicPath: "/js/", 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     test: path.join(__dirname, 'src'), 
     loader: ['babel-loader'], 
     query: { 
     cacheDirectory: 'babel_cache', 
     presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015'] 
     } 
    }, 
{ test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') } 
    ] 
    }, 
    plugins: debug ? [] : [ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
    }), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { warnings: false }, 
     mangle: true, 
     sourcemap: false, 
     beautify: false, 
     dead_code: true 
    }), 
    ] 
}; 

的package.json

{ 
    "name": "judo-heroes", 
    "version": "1.0.0", 
    "description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.", 
    "main": "src/server.js", 
    "repository": "[email protected]:lmammino/judo-heroes.git", 
    "scripts": { 
    "start": "NODE_ENV=development node_modules/.bin/babel-node --presets 'react,es2015' src/server.js", 
    "start-dev": "npm run start-dev-hmr", 
    "start-dev-single-page": "node_modules/.bin/http-server src/static", 
    "start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot", 
    "build": "NODE_ENV=development node_modules/.bin/webpack -d" 
    }, 
    "author": "Luciano Mammino", 
    "license": "MIT", 
    "dependencies": { 
    "babel-cli": "^6.11.4", 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.5", 
    "babel-plugin-react-html-attrs": "^2.0.0", 
    "babel-preset-es2015": "^6.13.2", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-react-hmre": "^1.1.1", 
    "ejs": "^2.5.1", 
    "express": "^4.14.0", 
    "react": "^15.3.1", 
    "react-dom": "^15.3.1", 
    "react-router": "^2.6.1" 
    }, 
    "devDependencies": { 
    "http-server": "^0.9.0", 
    "react-hot-loader": "^1.3.0", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

我試圖讓瀏覽器刷新每次我騰出時間更改了某些組件,但更改不會發生。

+0

做任何事情得到印在控制檯? –

+0

nope,什麼都沒有 – Alex

回答

1

您的問題可能是您自第一臺裝載機匹配以來無法通過測試test: /\.jsx?$/,進入裝載機。

您可以嘗試在第一個模塊中使用react-hot嗎?

{ 
    test: path.join(__dirname, 'src'), 
    loader: ['react-hot','babel-loader'], 
    query: { 
    cacheDirectory: 'babel_cache', 
    presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015'] 
    } 
}, 

從長遠來看,對這個裝載機的更精確的測試會更好。

+0

得到這個錯誤:index.js:51未捕獲錯誤:locals [0]似乎不是一個模塊對象,啓用熱模塊替換API。您應該通過在Babel配置中使用'env'部分禁用生產中的react-transform-hmr。請參閱自述文件中的示例:https://github.com/gaearon/react-transform-hmr(...) – Alex

+0

我不熟悉hmre抱歉。但它似乎被棄用。當它不在預設中時它工作嗎? –

+0

是的,它確實..... – Alex

0

我根本就運行此命令:

「啓動DEV-HMR」: 「node_modules /的.bin /的WebPack-DEV-服務器--progress --inline --hot」,

{ 
    "name": "judo-heroes", 
    "version": "1.0.0", 
    "description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.", 
    "main": "src/server.js", 
    "repository": "[email protected]:lmammino/judo-heroes.git", 
    "scripts": { 
    "start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js", 
    "start-dev": "npm run start-dev-hmr", 
    "start-dev-single-page": "node_modules/.bin/http-server src/static", 
    "start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot", 
    "build": "NODE_ENV=production node_modules/.bin/webpack -p" 
    }, 
    "author": "Luciano Mammino", 
    "license": "MIT", 
    "dependencies": { 
    "babel-cli": "^6.11.4", 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.5", 
    "babel-plugin-react-html-attrs": "^2.0.0", 
    "babel-preset-es2015": "^6.13.2", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-react-hmre": "^1.1.1", 
    "ejs": "^2.5.1", 
    "express": "^4.14.0", 
    "react": "^15.3.1", 
    "react-dom": "^15.3.1", 
    "react-router": "^2.6.1" 
    }, 
    "devDependencies": { 
    "http-server": "^0.9.0", 
    "react-hot-loader": "^1.3.0", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.14.1" 
    } 
}