tooling: workaround css modules HMR issue
This commit is contained in:
parent
6987f4f25b
commit
79b9b1db1a
2 changed files with 14 additions and 29 deletions
34
server.js
34
server.js
|
@ -13,23 +13,12 @@ const hotMiddleware = require('webpack-hot-middleware');
|
||||||
const { PORT } = process.env;
|
const { PORT } = process.env;
|
||||||
const port = PORT ? Number(PORT) : 3000;
|
const port = PORT ? Number(PORT) : 3000;
|
||||||
|
|
||||||
config.entry.app.unshift(
|
config.entry.app.unshift('webpack-hot-middleware/client');
|
||||||
// activate HMR for React
|
|
||||||
// 'react-hot-loader/patch',
|
|
||||||
|
|
||||||
'webpack-hot-middleware/client'
|
|
||||||
// // bundle the client for webpack-dev-server
|
|
||||||
// // and connect to the provided endpoint
|
|
||||||
// 'webpack-dev-server/client?http://0.0.0.0:' + port,
|
|
||||||
// // bundle the client for hot reloading
|
|
||||||
// // only- means to only hot reload for successful updates
|
|
||||||
// 'webpack/hot/only-dev-server'
|
|
||||||
);
|
|
||||||
config.plugins.push(
|
config.plugins.push(
|
||||||
// enable HMR globally
|
|
||||||
new webpack.HotModuleReplacementPlugin(),
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
// prints more readable module names in the browser console on HMR updates
|
// prints more readable module names in the browser console on HMR updates
|
||||||
new webpack.NamedModulesPlugin()
|
new webpack.NamedModulesPlugin(),
|
||||||
|
new webpack.NoEmitOnErrorsPlugin()
|
||||||
);
|
);
|
||||||
|
|
||||||
const compiler = webpack(config);
|
const compiler = webpack(config);
|
||||||
|
@ -37,26 +26,15 @@ const compiler = webpack(config);
|
||||||
const publicPath = config.output.publicPath;
|
const publicPath = config.output.publicPath;
|
||||||
const stats = {
|
const stats = {
|
||||||
colors: true,
|
colors: true,
|
||||||
|
version: false,
|
||||||
|
modulesSort: 'issuer',
|
||||||
|
assets: false,
|
||||||
cached: false,
|
cached: false,
|
||||||
cachedAssets: false,
|
cachedAssets: false,
|
||||||
chunks: false,
|
chunks: false,
|
||||||
chunkModules: false
|
chunkModules: false
|
||||||
};
|
};
|
||||||
|
|
||||||
// webpack-dev-server options
|
|
||||||
// const options = {
|
|
||||||
// hotOnly: true,
|
|
||||||
// host: '0.0.0.0',
|
|
||||||
// contentBase: path.join(__dirname, 'public'),
|
|
||||||
// publicPath,
|
|
||||||
// stats,
|
|
||||||
// overlay: {
|
|
||||||
// warnings: true,
|
|
||||||
// errors: true
|
|
||||||
// },
|
|
||||||
// historyApiFallback: true
|
|
||||||
// };
|
|
||||||
|
|
||||||
const options = { publicPath, stats };
|
const options = { publicPath, stats };
|
||||||
|
|
||||||
app.use(devMiddleware(compiler, options));
|
app.use(devMiddleware(compiler, options));
|
||||||
|
|
|
@ -56,7 +56,14 @@ const localIdentName = isDev ? LOCAL_IDENT_NAME_DEV : LOCAL_IDENT_NAME_PROD;
|
||||||
|
|
||||||
const cssnano = require('cssnano');
|
const cssnano = require('cssnano');
|
||||||
const loaders = {
|
const loaders = {
|
||||||
style: { loader: 'style-loader' },
|
style: {
|
||||||
|
loader: 'style-loader',
|
||||||
|
options: {
|
||||||
|
// workaround css modules HMR issue
|
||||||
|
// see https://github.com/webpack-contrib/style-loader/issues/320
|
||||||
|
hmr: false
|
||||||
|
}
|
||||||
|
},
|
||||||
css: { loader: 'css-loader' },
|
css: { loader: 'css-loader' },
|
||||||
cssModule: {
|
cssModule: {
|
||||||
loader: 'css-loader',
|
loader: 'css-loader',
|
||||||
|
|
Loading…
Reference in a new issue