0
Ich versuche, webpack-hot-middleware zu verwenden, um die Module meiner Anwendung neu zu laden. Ich benutze auch Webpack-Dev-Middleware.webpack-hot-middleware funktioniert nicht mit webpack-dev-middleware
Hier ist mein Setup.
package.json
{
"name": "dev-front-end",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.production.js",
"clean-dist": "rimraf dist",
"lint": "esw buildScripts data/*.js src *.js --color",
"lint:watch": "npm run lint -- --watch",
"prebuild": "npm run clean-dist",
"prestart": "babel-node buildScripts/startMessage.js",
"security-check": "nsp check",
"serve-dist": "babel-node buildScripts/distServer.js",
"serve-src": "babel-node buildScripts/srcServer.js",
"share": "ngrok http 3000",
"start": "npm run serve-src",
"test": "babel-node buildScripts/testSetup.js",
"test:watch": "npm run test -- --watch"
},
"dependencies": {
"angular": "1.5.11",
"angular-animate": "<1.6.0",
"angular-aria": "<1.6.0",
"angular-audio": "^1.7.3",
"angular-cookie": "^4.1.0",
"angular-cookies": "<1.6.0",
"angular-google-maps": "^2.4.1",
"angular-ismobile": "^1.0.0",
"angular-loading-bar": "^0.9.0",
"angular-material": "^1.1.3",
"angular-messages": "<1.6.0",
"angular-scroll": "^1.0.0",
"angular-socialshare": "^2.3.7",
"angular-socket-io": "^0.7.0",
"angular-timeago": "^0.4.4",
"angular-ui-router": "^1.0.0-rc.1",
"angulartics": "^1.4.0",
"angulartics-google-analytics": "^0.4.0",
"bootstrap": "v4.0.0-alpha.6",
"bootstrap-social": "^5.1.1",
"cropperjs": "^0.8.1",
"font-awesome": "^4.7.0",
"lodash": "^4.17.4",
"ng-file-upload": "^12.2.13",
"ng-infinite-scroll": "^1.3.0",
"ng-token-auth": "^0.0.30",
"ngSmoothScroll": "^2.0.0",
"ngclipboard": "^1.1.1",
"restangular": "^1.6.1",
"socket.io-client": "^2.0.3"
},
"author": "Medhavin Goyal",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-latest": "^6.24.1",
"compression": "^1.6.2",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.4",
"eslint": "^4.0.0",
"eslint-config-angular": "^0.5.0",
"eslint-loader": "^1.8.0",
"eslint-plugin-angular": "^2.5.0",
"eslint-watch": "^3.1.2",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.28.0",
"jest": "^20.0.4",
"ng-annotate-loader": "^0.6.1",
"ngrok": "^2.2.11",
"npm-run-all": "^4.0.2",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.1",
"strip-loader": "^0.1.2",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0"
}
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
var VENDOR_LIBS = [
'webpack-hot-middleware/client?timeout=20000&reload=true',
'angular',
'angular-animate',
'angular-aria',
'angular-audio',
'angular-cookie',
'angular-cookies',
'angular-google-maps',
'angular-ismobile',
'angular-loading-bar',
'angular-material',
'angular-messages',
'angular-scroll',
'angular-socialshare',
'angular-socket-io',
'angular-timeago',
'angular-ui-router',
'angulartics',
'angulartics-google-analytics',
'bootstrap',
'cropperjs',
'lodash',
'ng-file-upload',
'ng-infinite-scroll',
'ng-token-auth',
'ngSmoothScroll',
'ngclipboard',
'restangular',
'socket.io-client'
];
const config = {
entry: {
bundle: ['webpack-hot-middleware/client?timeout=20000&reload=true', './src/app.module.js'],
vendor: VENDOR_LIBS
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'js/[name].[hash].js',
publicPath: '/'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: 'url-loader',
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/
},
{
use: 'file-loader?name=fonts/[name].[hash].[ext]',
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/
},
{
use: ExtractTextPlugin.extract({
use: 'css-loader'
}),
test: /\.css$/
},
{
use: 'raw-loader',
test: /\.html$/,
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin('css/style.[hash].css'),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor','manifest']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Tether: 'tether',
Popper: ['popper.js', 'default'],
_: 'lodash',
io: 'socket.io-client'
}),
new CopyWebpackPlugin([{
from: 'assets',
to: 'assets'
}]),
new webpack.HotModuleReplacementPlugin(),
// new webpack.NoEmitOnErrorsPlugin()
],
devtool: 'inline-source-map',
target: 'web'
};
module.exports = config;
srcServer.js
import express from 'express';
import path from 'path';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import historyApiFallback from 'connect-history-api-fallback';
import config from '../webpack.config';
const port = 3000;
const app = express();
app.use(webpackMiddleware(webpack(config), {
noInfo: false,
publicPath: config.output.publicPath
}));
app.use(webpackHotMiddleware(webpack(config), {
'log': console.log,
'heartbeat': 10 * 1000
}));
app.use(historyApiFallback({
disableDotRule: true
}));
app.use(webpackMiddleware(webpack(config), {
noInfo: false,
publicPath: config.output.publicPath
}));
app.listen(port, function(err) {
if (err) {
console.log(err);
} else {
console.log("App listening on port " + port);
}
});
Die Einrichtung ist n nicht arbeiten. Die Kompilierung funktioniert einwandfrei, wenn ich meinen Code aktualisiere und wenn ich meinen Browser aktualisiere, wird der neue Anwendungscode ausgeführt. Die Module werden jedoch nicht ersetzt.
Bitte helfen Sie mir dieses Problem zu lösen. Vielen Dank!
Danke robertkelp. Ich folge dem Handbuch, aber vergeblich. Es funktioniert einfach nicht. –
Haben Sie die Option 'path' entfernt? – robertklep
Ja. Hat das auch getan. Immer noch das gleiche Problem. –