0
これは私をナットにしています。私はhapi/hapi-webpack-pluginとwebpack-hot-middlewareでHMRを設定しようとしています。私のセットアップは、フロントエンドのフレームワークとしてAPS.NE MVC 5アプリケーション（データ提供）とAureliaです。webpack-hot-middlewareはHMRの更新でエラーをスローします - status.hotは未定義です（未定義のプロパティ 'status'を読み取ることができません）
HMRが正常に起動しているようだ：もう一度、適切に発射され、再構築ファイルのhtml/ 
その後、私は私のjsのいずれかに変更を行うとき： 
が、私は受けていますmodule.hotが未定義であり、それはmodule.hot.statusをチェックするときに自然にそれが（アウトエラーであろうプロセスupdate.js）
ここでは、関連するファイルは、次のとおりです。 のWebPACK-DEV-server.js
/* eslint no-console: 0 */
import {Server} from 'hapi';
import H2o2 from 'h2o2';
import yargs from 'yargs';
import Webpack from 'webpack';
import WebpackPlugin from 'hapi-webpack-plugin';
import webpackConfig from './webpack.config.babel';
const argv = yargs.argv;
const isNumeric = n => !isNaN(parseFloat(n)) && isFinite(n);
if (!isNumeric(argv.port)) {
\t console.log(`Port must be numeric`);
\t process.exit(-1);
}
const compiler = new Webpack(webpackConfig);
const server = new Server();
server.connection({ host: 'localhost', port: 6789, labels: 'proxy-server' });
const assets = {
\t publicPath: webpackConfig.output.publicPath,
\t hot: false,
\t noInfo: true,
\t quiet: false,
\t host: 'localhost',
\t port: 6790,
\t stats: {
\t \t colors: true,
\t },
};
const hot = {
\t log: console.log,
\t path: '/__webpack_hmr',
\t heartbeat: 10 * 1000,
};
server.register([
{
\t register: H2o2,
},
{
\t register: WebpackPlugin,
\t options: { compiler, assets, hot },
},
], error => {
\t if (error) {
\t \t return console.error(error);
\t }
\t server.route({
\t \t method: ['GET', 'POST'],
\t \t path: '/{path*}',
\t \t handler: (request, reply) => {
\t \t \t if (/^Content\/bundles\/[A-Za-z0-9\-]+\.css/.test(request.params.path)) {
\t \t \t \t const response = reply('// This is a fake CSS content... :)');
\t \t \t \t response.type('text/css');
\t \t \t \t return response;
\t \t \t }
\t \t \t return reply.proxy({
\t \t \t \t host: 'localhost',
\t \t \t \t port: argv.port,
\t \t \t \t passThrough: true,
\t \t \t });
\t \t },
\t });
\t server.start(() => console.log(`Server running on ${server.info.uri}`));
});Package.json
{
"name": "aurelia-skeleton-navigation-webpack",
"version": "1.1.1",
"description": "A starter kit for building a standard navigation-style app with Aurelia and webpack.",
"main": "dist/main.js",
"scripts": {
...
"start": "babel-node ./webpack-dev-server.js"
...
},
],
"aurelia": {
"build": {
"resources": []
}
},
"dependencies": {
"aurelia-bootstrapper-webpack": "^1.1.0",
"aurelia-event-aggregator": "^1.0.0",
"aurelia-fetch-client": "^1.0.1",
"aurelia-framework": "^1.0.7",
"aurelia-history-browser": "^1.0.0",
"aurelia-http-client": "^1.0.3",
"aurelia-loader-webpack": "^1.0.3",
"aurelia-logging-console": "^1.0.0",
"aurelia-pal-browser": "^1.0.0",
"aurelia-polyfills": "^1.1.1",
"aurelia-route-recognizer": "^1.1.0",
"aurelia-router": "^1.0.7",
"aurelia-templating-binding": "^1.1.0",
"aurelia-templating-resources": "^1.2.0",
"aurelia-templating-router": "^1.0.0",
"aurelia-ui-virtualization": "1.0.0-beta.3.0.0",
"babel-polyfill": "^6.20.0",
"bootstrap": "^3.3.7",
"d3": "^4.4.0",
"font-awesome": "^4.7.0",
"highcharts": "^5.0.6",
"isomorphic-fetch": "^2.2.1",
"select2": "3.5.1"
},
"devDependencies": {
"@easy-webpack/config-aurelia": "^2.2.2",
"@easy-webpack/config-babel": "^4.0.0",
"@easy-webpack/config-common-chunks-simple": "^2.0.3",
"@easy-webpack/config-copy-files": "^1.1.2",
"@easy-webpack/config-css": "^4.0.0",
"@easy-webpack/config-env-development": "^2.1.5",
"@easy-webpack/config-env-production": "^3.0.0",
"@easy-webpack/config-external-source-maps": "^3.1.0",
"@easy-webpack/config-fonts-and-images": "^2.1.0",
"@easy-webpack/config-generate-index-html": "^2.1.1",
"@easy-webpack/config-global-bluebird": "^2.1.0",
"@easy-webpack/config-global-jquery": "^2.1.0",
"@easy-webpack/config-global-regenerator": "^1.2.2",
"@easy-webpack/config-html": "^3.1.0",
"@easy-webpack/config-json": "^3.1.0",
"@easy-webpack/config-test-coverage-istanbul": "^3.2.0",
"@easy-webpack/config-uglify": "^2.2.3",
"@easy-webpack/core": "^2.0.0",
"aurelia-tools": "^1.0.0",
"babel-cli": "^6.4.5",
"babel-loader": "^6.2.8",
"babel-plugin-transform-class-properties": "^6.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.0.0",
"babel-register": "^6.18.0",
"concurrently": "^3.1.0",
"cross-env": "^3.1.3",
"del-cli": "^0.2.0",
"eslint": "^3.12.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"h2o2": "^5.4.0",
"hapi": "^16.0.2",
"hapi-webpack-plugin": "^1.3.0",
"html-webpack-plugin": "^2.24.1",
"http-server": "^0.9.0",
"install": "^0.8.2",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.0",
"karma-remap-istanbul": "^0.2.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"node-sass": "^4.1.0",
"npm": "^4.0.3",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"postcss-cssnext": "^2.9.0",
"postcss-import": "^9.0.0",
"postcss-loader": "^1.2.1",
"protractor": "^4.0.11",
"sass-loader": "^4.1.0",
"url-loader": "^0.5.7",
"wait-on": "^2.0.1",
"webpack": "2.1.0-beta.27",
"webpack-dev-server": "2.1.0-beta.12",
"yargs": "^3.32.0",
"babel-preset-es2015": "^6.3.13",
"bootstrap": "^3.3.6",
"clean-webpack-plugin": "^0.1.8",
"css-loader": "^0.23.1",
"font-awesome": "^4.5.0",
"strip-loader": "^0.1.2",
"style-loader": "^0.13.0"
}
}webpack.confing.babel.js
/**
* To learn more about how to use Easy Webpack
* Take a look at the README here: https://github.com/easy-webpack/core
**/
import { generateConfig, get, stripMetadata, EasyWebpackConfig } from '@easy-webpack/core'
import path from 'path'
...
process.env.BABEL_ENV = 'webpack';
const ENV = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || (process.env.NODE_ENV = 'development');
// basic configuration:
const title = 'Aurelia Navigation Skeleton';
const baseUrl = '.';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve('dist');
let htmlWebPackPlugin = new HtmlWebpackPlugin({
\t inject: false,
\t template: 'Areas/Aurelia/Views/Shared/_AureliaLayoutTemplate.cshtml',
\t filename: '../Areas/Aurelia/Views/Shared/_AureliaLayout.cshtml'
});
let optimizeCssAssetsPlugin = new OptimizeCssAssetsPlugin({
\t assetNameRegExp: /\.css$/,
\t cssProcessorOptions: { discardComments: { removeAll: true } }
});
let plugins = ENV === 'production'
\t ? { plugins: [htmlWebPackPlugin, optimizeCssAssetsPlugin] }
\t : { plugins: [htmlWebPackPlugin, new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] };
const coreBundles = {
\t bootstrap: [
\t 'aurelia-bootstrapper-webpack',
\t 'aurelia-polyfills',
\t 'aurelia-pal',
\t 'aurelia-pal-browser',
\t 'regenerator-runtime'
\t ],
\t // these will be included in the 'aurelia' bundle (except for the above bootstrap packages)
\t aurelia: [
\t 'aurelia-bootstrapper-webpack',
\t 'aurelia-binding',
\t 'aurelia-dependency-injection',
\t 'aurelia-event-aggregator',
\t 'aurelia-framework',
\t 'aurelia-history',
\t 'aurelia-history-browser',
\t 'aurelia-loader',
\t 'aurelia-loader-webpack',
\t 'aurelia-logging',
\t 'aurelia-logging-console',
\t 'aurelia-metadata',
\t 'aurelia-pal',
\t 'aurelia-pal-browser',
\t 'aurelia-path',
\t 'aurelia-polyfills',
\t 'aurelia-route-recognizer',
\t 'aurelia-router',
\t 'aurelia-task-queue',
\t 'aurelia-templating',
\t 'aurelia-templating-binding',
\t 'aurelia-templating-router',
\t 'aurelia-templating-resources',
\t 'aurelia-ui-virtualization',
\t 'select2',
\t 'webpack-hot-middleware/client',
\t 'webpack/hot/only-dev-server'
\t ]
}
/**
* Main Webpack Configuration
*/
let config = generateConfig(
\t {
\t \t entry: {
\t \t \t 'app': ['./src/main' /* this is filled by the aurelia-webpack-plugin */,
\t 'webpack-hot-middleware/client',
\t 'webpack/hot/only-dev-server'],
\t \t \t 'aurelia-bootstrap': coreBundles.bootstrap,
\t \t \t 'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1)
\t \t },
\t \t output: {
\t \t \t path: outDir,
\t \t \t publicPath: '/dist/'
\t \t },
\t ...
module.exports = stripMetadata(config);は、私は未定義module.hot財産を残しconfigに何かが足りないのですか？