0

我遇到了一個非常令人沮喪的問題,那就是我的webpack-hot-middleware不是「熱重載」。它正在構建項目,並且在我對我的任何文件進行編輯時重建項目,但它似乎從不顯示任何更改,並始終在對它們進行編輯之前顯示我的文件(幾乎就像緩存文件或東西)。Webpack Hot Middleware不能在Ubuntu上使用React進行熱重裝?

我正在使用Express服務器,對於所有這些都很新穎。我實際上正在嘗試使用從僱主那裏獲得的文件來設置開發環境,並且很難設法解決如何解決這個問題。

我的package.json運行這些腳本:

"scripts": { 
"postinstall": "npm run prod", 
"prod": "webpack --config ./webpack.prod.config.js", 
"start": "node ./app_build.js" 
} 

後的 「故宮安裝」,它似乎運行此文件 「webpack.prod.config.js」:

const path = require('path'); 
const webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    devtool: 'source-map', 

    entry: './main.js', 

    output: { 
    path: path.join(__dirname,'prod'), 
    filename: 'bundle.js', 
    publicPath: '/' 
    }, 

    plugins:[ 
     new webpack.DefinePlugin({ 
      'process.env':{ 
       NODE_ENV: JSON.stringify('production'), 
      } 
     }), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
     minimize: true, 
     compress:{ 
      warnings:false 
     } 
     }), 
     new ExtractTextPlugin('bundle.css'), 
     new webpack.IgnorePlugin(/^(buffertools)$/) //Remove deeper dependancy for react-jsonschema-forms error 
    ], 

    module: { 
    loaders: [ 
     { test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] }}, 
     { test: /\.css?$/, 
     loader: ExtractTextPlugin.extract('style', 'css')}, 
     { test: /\.less$/, 
     loader: 'style!css!less' }, 
     { test: /\.(png|jpg|gif)$/, 
     loader: 'url-loader?limit=100000' }, 
     { 
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "url?limit=10000&mimetype=application/font-woff" 
     }, { 
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "url?limit=10000&mimetype=application/font-woff" 
     }, { 
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "url?limit=10000&mimetype=application/octet-stream" 
     }, { 
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "file" 
     }, { 
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "url?limit=10000&mimetype=image/svg+xml" 
     } 
    ] 
    } 
}; 

的「故宮開始」跑「app_build.js」它看起來像這樣:

const Server = require('./server.js'); 
const port = (process.env.PORT || 3333); 
const app = Server.app(); 
const stormpath = require('express-stormpath'); 
const path = require('path'); 
var helpers = require('express-stormpath/lib/helpers'); 
var uuid = require('node-uuid'); 
var requestProxy = require('express-request-proxy'); 
var btoa = require('btoa'); 
var session = require('express-session'); 
var request = require('request'); 
var bodyParser = require('body-parser'); 
var Mailgun = require('mailgun-js'); 
request = request.defaults({jar:true}); 

const CONSTANTS = require('./src/constants/Constants'); 


//console.log('version: '+ process.env.NODE_ENV); 

if (process.env.NODE_ENV !== 'production') { 
    const webpack = require('webpack'); 
    const webpackDevMiddleware = require('webpack-dev-middleware'); 
    const webpackHotMiddleware = require('webpack-hot-middleware'); 
    const config = require('./webpack.dev.config.js'); 
    const compiler = webpack(config); 

    app.use(webpackHotMiddleware(compiler)); 
    app.use(webpackDevMiddleware(compiler, { 
     noInfo: true, 
     publicPath: config.output.publicPath 
    })) 
    console.log(`Listening at http://localhost:${port}`); 
} 

還有更多的這個文件,但我相信我的問題有一定的與我的公共路徑或某事有關的事情,我不完全確定。就像我說的那樣,我是從以前的開發人員手中接過這個配置的,我對這一切都是全新的。

+0

webpack.dev.config.js如何看起來像? – JoseAPL

回答

0

我發現了這個問題來到了愚蠢的人的錯誤:我須藤NPM安裝「代管我所有的包,我想我只是需要做須藤npm start爲了允許webpack訪問這些文件。只是一個普通的「npm start」不會像預期的那樣讓熱重載功能。

0

還有一個similar issue
在ubuntu上試試命令。熱重裝作品後,我使用它:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

相關問題