[Edit] Github Test Repo Created for you to test!!
I have hot reloading without any problems, but it reloads the entire page whenever I make a single css change. I would like it to inject any css changes and ideally do similarly with react ponents unless a full reload is truly needed.
** I get the following console logs **
[WDS] App updated. Repiling...
client?cd17:41 [WDS] App updated. Repiling...
client?8505:41 [WDS] App updated. Repiling...
client?cd17:41 [WDS] App updated. Repiling...
client?8505:41 [WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
client?cd17:41 [WDS] App hot update...
dev-server.js:33 [HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:33
dev-server.js:34 [HMR] Error: Aborted because ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/ponents/shared/userPages/userPages.css is not accepted
Update propagation: ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/ponents/shared/userPages/userPages.css -> ./src/ponents/shared/userPages/userPages.css -> ./src/ponents/Signin/index.js -> ./src/routes.js -> ./src/index.js -> 0
at hotApply (http://localhost:8080/dist/main.js:430:30)
at hotUpdateDownloaded (http://localhost:8080/dist/main.js:283:13)
at hotAddUpdateChunk (http://localhost:8080/dist/main.js:263:13)
at webpackHotUpdateCallback (http://localhost:8080/dist/main.js:8:12)
at http://localhost:8080/dist/0.75f9c418ba8b1fdc9ad0.hot-update.js:1:1
webpack config
/* eslint-disable */
const Config = require('webpack-config').default;
const webpack = require('webpack');
const DashboardPlugin = require('webpack-dashboard/plugin');
const {environment} = require('webpack-config');
const path = require('path');
environment.set('cssIdent', '[path]___[name]__[local]___[hash:base64:5]');
module.exports = new Config().extend('./webpack.base.config.js').merge({
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
devServer: {
contentBase: [
'demo/'
],
hot: true,
historyApiFallback: true,
host: '0.0.0.0',
publicPath: '/dist/'
},
output: {
filename: 'main.js',
path: path.join(__dirname, 'dist'),
publicPath: '/dist/'
},
devtool: 'inline-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': {
BABEL_ENV: JSON.stringify('development')
}
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new DashboardPlugin()
],
cache: true
});
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { AppContainer } from 'react-hot-loader';
import { ConnectedRouter } from 'react-router-redux'
import injectTapEventPlugin from 'react-tap-event-plugin';
import nprogress from 'nprogress';
import store from './configureStore';
import Routes from './routes';
import './ponents/shared/main.css';
import createHashHistory from 'history/createHashHistory'
const history = createHashHistory({
hashType: 'slash'
});
//Remove on screen tap delay
injectTapEventPlugin();
//Add progress bar
nprogress.configure({ minimum: 0.15, showSpinner: false, speed: 500 });
// Now you can dispatch navigation actions from anywhere!
// store.dispatch(push('/foo'))
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<ConnectedRouter history={history}>
<Routes/>
</ConnectedRouter>
</Provider>
</AppContainer>,
document.getElementById('app')
);
Store.js
import { createStore, applyMiddleware, pose } from 'redux'
import { createLogger } from 'redux-logger'
import { routerMiddleware } from 'react-router-redux'
import reducers from './reducers';
const configureStore = function (history, preloadedState = {}) {
// Build the middleware for intercepting and dispatching navigation actions
const middlewareHistory = routerMiddleware(history);
const store = createStore(
reducers,
preloadedState,
pose(
applyMiddleware(createLogger(), middlewareHistory)
)
);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('./reducers', () => {
const nextReducer = require('./reducers').default;
store.replaceReducer(nextReducer);
});
}
return store;
};
export default configureStore(history);
A random ponent
import React from 'react';
import { NavLink } from 'react-router-dom'
import store from '../../configureStore';
import userStyles from '../shared/userPages/userPages.css';
class SignIn extends React.Component {
render(){
return (
<div className={userStyles.home}>
</div>
);
}
}
export default SignIn;
.babelrc
{
"presets": [
["es2015", {"modules": false}],
"stage-0",
"react"
],
"plugins": [
"react-hot-loader/babel"
],
"env": {
"development/client": {
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true
}]
]
},
"test": {
"presets": ["es2015"],
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true
}]
]
}
}
}
[Edit] Github Test Repo Created for you to test!!
I have hot reloading without any problems, but it reloads the entire page whenever I make a single css change. I would like it to inject any css changes and ideally do similarly with react ponents unless a full reload is truly needed.
** I get the following console logs **
[WDS] App updated. Repiling...
client?cd17:41 [WDS] App updated. Repiling...
client?8505:41 [WDS] App updated. Repiling...
client?cd17:41 [WDS] App updated. Repiling...
client?8505:41 [WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
client?cd17:41 [WDS] App hot update...
dev-server.js:33 [HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:33
dev-server.js:34 [HMR] Error: Aborted because ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/ponents/shared/userPages/userPages.css is not accepted
Update propagation: ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/ponents/shared/userPages/userPages.css -> ./src/ponents/shared/userPages/userPages.css -> ./src/ponents/Signin/index.js -> ./src/routes.js -> ./src/index.js -> 0
at hotApply (http://localhost:8080/dist/main.js:430:30)
at hotUpdateDownloaded (http://localhost:8080/dist/main.js:283:13)
at hotAddUpdateChunk (http://localhost:8080/dist/main.js:263:13)
at webpackHotUpdateCallback (http://localhost:8080/dist/main.js:8:12)
at http://localhost:8080/dist/0.75f9c418ba8b1fdc9ad0.hot-update.js:1:1
webpack config
/* eslint-disable */
const Config = require('webpack-config').default;
const webpack = require('webpack');
const DashboardPlugin = require('webpack-dashboard/plugin');
const {environment} = require('webpack-config');
const path = require('path');
environment.set('cssIdent', '[path]___[name]__[local]___[hash:base64:5]');
module.exports = new Config().extend('./webpack.base.config.js').merge({
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
devServer: {
contentBase: [
'demo/'
],
hot: true,
historyApiFallback: true,
host: '0.0.0.0',
publicPath: '/dist/'
},
output: {
filename: 'main.js',
path: path.join(__dirname, 'dist'),
publicPath: '/dist/'
},
devtool: 'inline-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': {
BABEL_ENV: JSON.stringify('development')
}
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new DashboardPlugin()
],
cache: true
});
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { AppContainer } from 'react-hot-loader';
import { ConnectedRouter } from 'react-router-redux'
import injectTapEventPlugin from 'react-tap-event-plugin';
import nprogress from 'nprogress';
import store from './configureStore';
import Routes from './routes';
import './ponents/shared/main.css';
import createHashHistory from 'history/createHashHistory'
const history = createHashHistory({
hashType: 'slash'
});
//Remove on screen tap delay
injectTapEventPlugin();
//Add progress bar
nprogress.configure({ minimum: 0.15, showSpinner: false, speed: 500 });
// Now you can dispatch navigation actions from anywhere!
// store.dispatch(push('/foo'))
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<ConnectedRouter history={history}>
<Routes/>
</ConnectedRouter>
</Provider>
</AppContainer>,
document.getElementById('app')
);
Store.js
import { createStore, applyMiddleware, pose } from 'redux'
import { createLogger } from 'redux-logger'
import { routerMiddleware } from 'react-router-redux'
import reducers from './reducers';
const configureStore = function (history, preloadedState = {}) {
// Build the middleware for intercepting and dispatching navigation actions
const middlewareHistory = routerMiddleware(history);
const store = createStore(
reducers,
preloadedState,
pose(
applyMiddleware(createLogger(), middlewareHistory)
)
);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('./reducers', () => {
const nextReducer = require('./reducers').default;
store.replaceReducer(nextReducer);
});
}
return store;
};
export default configureStore(history);
A random ponent
import React from 'react';
import { NavLink } from 'react-router-dom'
import store from '../../configureStore';
import userStyles from '../shared/userPages/userPages.css';
class SignIn extends React.Component {
render(){
return (
<div className={userStyles.home}>
</div>
);
}
}
export default SignIn;
.babelrc
{
"presets": [
["es2015", {"modules": false}],
"stage-0",
"react"
],
"plugins": [
"react-hot-loader/babel"
],
"env": {
"development/client": {
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true
}]
]
},
"test": {
"presets": ["es2015"],
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true
}]
]
}
}
}
-
Did you disable modules in Babel
[“es2015”, {“modules”: false}]? I think repo would help. – Zero Commented Jun 7, 2017 at 11:01 - That is in there yes, in my babelrc, I agree, I will work on getting a repo out to test – Jamie Hutber Commented Jun 7, 2017 at 13:18
- Did you look here, you need to tell your app how to accept the change – Faris Commented Jun 11, 2017 at 8:44
-
Isn't that documention for
webpack v1? Sorry I didn't make it clear that I am usingwebpack v2– Jamie Hutber Commented Jun 11, 2017 at 14:09 - Here is a very dumbed down repo: github./hutber/test_hrm I'm not actually seeing the initial error messages anymore, but the problem is still there. No injecting of css. Any chances made to ponents or css reloads the whole page. – Jamie Hutber Commented Jun 11, 2017 at 14:27
2 Answers
Reset to default 1 +25you can use extract text webpack plugin for css hot reloading instead of whole page/module reloading. below is the guideline to know how to use https://github./webpack-contrib/extract-text-webpack-plugin https://www.npmjs./package/extract-text-webpack-plugin
For me it didn't work because I didn't have .babelrc file in my root directory and with below code inside it.
{
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744265975a4565865.html
评论列表（0条）