Ich bin auf ein sehr frustrierendes Problem gestoßen, bei dem meine Webpack-Hot-Middleware nicht "heiß nachladen" ist. Es baut das Projekt auf und baut das Projekt immer dann neu auf, wenn ich irgendwelche meiner fraglichen Dateien bearbeite, aber es scheint nie irgendwelche Änderungen zu zeigen und zeigt meine Dateien immer vor den Bearbeitungen an (fast so, als würde man sie zwischenspeichern) etwas).Webpack Hot Middleware nicht heiß auf Ubuntu mit React nachladen?
Ich benutze auch einen Express-Server und bin sehr neu in all dem. Ich versuche tatsächlich, eine Entwicklungsumgebung einzurichten, die Dateien verwendet, die mir von einem Arbeitgeber ausgehändigt wurden, und es fällt mir schwer, herauszufinden, wie ich das lösen kann.
Meine package.json läuft diese Skripte:
"scripts": {
"postinstall": "npm run prod",
"prod": "webpack --config ./webpack.prod.config.js",
"start": "node ./app_build.js"
}
Nach einem "npm installieren", so scheint es, diese Datei "webpack.prod.config.js" auszuführen:
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"
}
]
}
};
Ein „npm Start“ läuft „app_build.js“, die wie folgt aussieht:
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}`);
}
Es gibt mehr zu dieser Datei aber ich glaube, mein Problem hat einige was ich mit meinem publicPath oder etwas zu tun habe, bin ich mir nicht ganz sicher. Wie ich schon sagte, wurde mir diese Konfiguration von einem früheren Entwickler ausgehändigt und ich bin völlig neu in all dem.
Wie sieht webpack.dev.config.js aus? – JoseAPL