app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
{
"scripts": {
"serve:prod": "babel-node server.js --env=prod",
"build-vendor:prod": "webpack -p --env=prod --progress --profile --colors --config webpack.config.vendor.js",
"build-dist:prod": "webpack -p --env=prod --progress --profile --colors",
"build:prod": "npm run build-vendor:prod && npm run build-dist:prod",
"start:prod": "npm run build:prod && npm run serve:prod",
"serve": "babel-node server.js --env=dev",
"build-vendor": "webpack --env=dev --progress --profile --colors --display-error-details --config webpack.config.vendor.js",
"build-dist": "webpack --env=dev --progress --profile --colors --display-error-details",
"build": "npm run build-vendor && npm run build-dist",
"start": "npm run build && npm run serve"
},
"devDependencies": {
"aspnet-webpack": "^2.0.1",
"babel-cli": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.4",
"css-mqpacker": "^6.0.1",
"cssnano": "^3.10.0",
"doiuse": "^3.0.0",
"eslint": "^4.2.0",
"eslint-config-airbnb": "^15.0.2",
"eslint-loader": "^1.8.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.1.0",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.11.2",
"minimist": "^1.2.0",
"postcss-browser-reporter": "^0.5.0",
"postcss-cssnext": "^3.0.0",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.6",
"postcss-reporter": "^4.0.0",
"postcss-url": "^7.0.0",
"precss": "^2.0.0",
"style-loader": "^0.18.2",
"stylelint": "^7.12.0",
"stylelint-config-standard": "^16.0.0",
"url-loader": "^0.5.9",
"webpack": "^3.0.0",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.0",
"webpack-hot-middleware": "^2.18.1",
"webpack-notifier": "^1.5.0"
},
"dependencies": {
"axios": "^0.16.2",
"bootstrap": "^3.3.7",
"font-awesome": "^4.7.0",
"normalize.css": "^7.0.0",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-addons-css-transition-group": "^15.6.0",
"react-dom": "^15.6.1",
"react-hot-loader": "^3.0.0-beta.7",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1"
},
"-vs-binding": {
"ProjectOpened": [
"install"
]
}
}
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const dllManifest = require('./wwwroot/vendor-manifest.json');
const bundleOutputDir = './wwwroot';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
const NODE_ENV = isDevBuild ? 'development' : 'production';
// eslint-disable-next-line no-console
console.log(`Run webpack with NODE_ENV=${NODE_ENV}`);
const extractCSS = new ExtractTextPlugin('site.css');
return [{
cache: isDevBuild,
resolve: { extensions: ['.js', '.jsx'] },
entry: { main: './app/index' },
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: '/'
},
module: {
rules: [{
enforce: 'pre',
test: /\.(js|jsx)?$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
failOnError: true
}
}, {
test: /\.(js|jsx)?$/,
use: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
use: isDevBuild ? ['style-loader', {
loader: 'css-loader',
options: {
importLoaders: 1
}
}, 'postcss-loader'] : ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader?minimize',
options: {
importLoaders: 1
}
}, 'postcss-loader']
})
}, {
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: 'url-loader?limit=25000'
}, {
test: /\.html$/,
use: 'file-loader?name=[name].[ext]&outputPath=/'
}]
},
plugins: [
new WebpackNotifierPlugin(),
new webpack.DefinePlugin({
'process.env': {
ENV: JSON.stringify(NODE_ENV),
NODE_ENV: JSON.stringify(NODE_ENV)
}
}),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: dllManifest
})
].concat(isDevBuild ? [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
})
] : [
extractCSS,
new webpack.optimize.UglifyJsPlugin({
ie8: false,
warnings: false,
mangle: {
screw_ie8: true,
keep_fnames: true
},
compress: {
screw_ie8: true,
warnings: false
}
})
])
}];
};
Error at chrome sources panel
...
// import React from 'react';
// import ReactDOM from 'react-dom';
// import { AppContainer } from 'react-hot-loader';
// import { BrowserRouter as Router } from 'react-router-dom';
// import App from './components/App';
// import ScrollToTop from './components/Helpers/ScrollToTop';
// const render = (Component) => {
// ReactDOM.render(
// <AppContainer>
// <Router>
// <ScrollToTop>
// <Component />
// </ScrollToTop>
// </Router>
// </AppContainer>,
// document.getElementById('root')
// );
// };
// render(App);
if (true) {
module.hot.accept("./app/components/App.js""./app/components/App.js", function () {
console.log('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX updated');
});
}
;
...
Why it convert to "./app/components/App.js""./app/components/App.js".
When I remove HotModuleReplacement = true from startup everything works (except hmr).
{ "scripts": { "serve:prod": "babel-node server.js --env=prod", "build-vendor:prod": "webpack -p --env=prod --progress --profile --colors --config webpack.config.vendor.js", "build-dist:prod": "webpack -p --env=prod --progress --profile --colors", "build:prod": "npm run build-vendor:prod && npm run build-dist:prod", "start:prod": "npm run build:prod && npm run serve:prod", "serve": "babel-node server.js --env=dev", "build-vendor": "webpack --env=dev --progress --profile --colors --display-error-details --config webpack.config.vendor.js", "build-dist": "webpack --env=dev --progress --profile --colors --display-error-details", "build": "npm run build-vendor && npm run build-dist", "start": "npm run build && npm run serve" }, "devDependencies": { "aspnet-webpack": "^2.0.1", "babel-cli": "^6.24.1", "babel-eslint": "^7.2.3", "babel-loader": "^7.1.1", "babel-preset-env": "^1.6.0", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "cross-env": "^5.0.1", "css-loader": "^0.28.4", "css-mqpacker": "^6.0.1", "cssnano": "^3.10.0", "doiuse": "^3.0.0", "eslint": "^4.2.0", "eslint-config-airbnb": "^15.0.2", "eslint-loader": "^1.8.0", "eslint-plugin-import": "^2.7.0", "eslint-plugin-jsx-a11y": "^6.0.2", "eslint-plugin-react": "^7.1.0", "express": "^4.15.3", "extract-text-webpack-plugin": "^2.1.2", "file-loader": "^0.11.2", "minimist": "^1.2.0", "postcss-browser-reporter": "^0.5.0", "postcss-cssnext": "^3.0.0", "postcss-import": "^10.0.0", "postcss-loader": "^2.0.6", "postcss-reporter": "^4.0.0", "postcss-url": "^7.0.0", "precss": "^2.0.0", "style-loader": "^0.18.2", "stylelint": "^7.12.0", "stylelint-config-standard": "^16.0.0", "url-loader": "^0.5.9", "webpack": "^3.0.0", "webpack-dev-middleware": "^1.11.0", "webpack-dev-server": "^2.5.0", "webpack-hot-middleware": "^2.18.1", "webpack-notifier": "^1.5.0" }, "dependencies": { "axios": "^0.16.2", "bootstrap": "^3.3.7", "font-awesome": "^4.7.0", "normalize.css": "^7.0.0", "prop-types": "^15.5.10", "react": "^15.6.1", "react-addons-css-transition-group": "^15.6.0", "react-dom": "^15.6.1", "react-hot-loader": "^3.0.0-beta.7", "react-router": "^4.1.1", "react-router-dom": "^4.1.1" }, "-vs-binding": { "ProjectOpened": [ "install" ] } }Error at chrome sources panel
Why it convert to
"./app/components/App.js""./app/components/App.js".When I remove
HotModuleReplacement = truefrom startup everything works (except hmr).