linux上的热重新加载问题;使用deleteing node_modules和缓存清除.已修复

这里的第一个问题。热重新加载以前工作正常，然后重新安装操作系统，现在不工作了。目前有一个丑陋的解决方案。

我的朋友建立了一个我一直在学习的react项目。我最近不得不重新安装我的操作系统。在此之前，热重新加载工作良好。

使用我当前的机器，我可以正常运行1个会话。关闭和启动后，热重新加载不起作用。然后我会：

删除节点模块
npm缓存清除--强制
npm安装

如本答案所示https://github.com/webpack/webpack-dev-server/issues/1003#issuecomment-328706990

我以为这是我的机器——不知道该去哪里找。任何帮助都会很棒。每次都这样做有点痛苦。感谢

我用的是Xubuntu，VScode，firefox。

webpack.config.js的内容。不确定它是否有助于

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
function createWebpackConfig() {
const prod = process.env.NODE_ENV === 'production' || false;
const dev = !prod;
const buildDir = path.join(__dirname, 'build');
const projDir = path.join(__dirname, 'src');
const commonDir = path.join(projDir, 'common');
const devPlugins = [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin()
];
const prodPlugins = [
new MiniCssExtractPlugin({
filename: 'main-[contenthash].css',
allChunks: true
}),
new webpack.optimize.AggressiveMergingPlugin()
];
return {
entry: {
app: path.join(projDir, 'index.js')
},
output: {
path: buildDir,
sourceMapFilename: '[name].map',
filename: `[name]-[${dev ? 'hash' : 'chunkhash'}].js`
},
resolve: {
modules: ['src', 'node_modules'],
extensions: ['.js', '.jsx', '.css', '.scss'],
alias: {
actions: path.join(commonDir, 'actions'),
reducers: path.join(commonDir, 'reducers'),
assets: path.join(commonDir, 'assets'),
components: path.join(commonDir, 'components'),
styles: path.join(commonDir, 'styles'),
commonStyles: path.join(commonDir, 'styles', 'common.scss'),
utils: path.join(commonDir, 'utils')
}
},
cache: dev,
devtool: dev ? 'cheap-module-source-map' : false,
stats: {
colors: true,
reasons: true,
hash: Boolean(prod),
version: Boolean(prod),
timings: true,
chunks: Boolean(prod),
chunkModules: Boolean(prod),
cached: Boolean(prod),
cachedAssets: Boolean(prod)
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(projDir, 'index.template.html'),
title: 'IMDB Clone',
favicon: path.join(commonDir, 'assets', 'favicon.ico'),
inject: false,
minify: {
removeComments: Boolean(prod),
collapseWhitespace: Boolean(prod),
removeRedundantAttributes: Boolean(prod),
useShortDoctype: Boolean(prod),
removeEmptyAttributes: Boolean(prod),
removeStyleLinkTypeAttributes: Boolean(prod),
keepClosingSlash: Boolean(prod),
minifyJS: Boolean(prod),
minifyCSS: Boolean(prod),
minifyURLs: Boolean(prod)
},
baseUrl: dev ? '' : "location.protocol + '//' + location.host"
}),
new webpack.ProvidePlugin({
React: 'react',
PropTypes: 'prop-types',
classNames: 'classnames'
})
].concat(dev ? devPlugins : prodPlugins),
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: dev
}
}
},
{
test: /.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader']
},
{
test: /.s?css$/,
exclude: /node_modules/,
use: dev
? [
'style-loader',
{
loader: 'css-loader',
options: {
minimize: Boolean(prod),
localIdentName: dev ? '[path][name]__[local]' : '',
modules: true,
url: false,
sourceMap: true,
importLoader: 2
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
: MiniCssExtractPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
minimize: Boolean(prod),
modules: true
}
},
'sass-loader'
]
})
},
{
test: /.html$/,
exclude: [/node_modules/, path.join(__dirname, 'src', 'index.template.html')],
use: [
{
loader: 'html-loader',
options: {
minimize: true
}
}
]
},
{
test: /.(jpg|png|eot|svg|ttf|woff|woff2)?(?[a-z0-9#=&.]+)?$/,
use: 'file-loader'
}
]
},
devServer: {
historyApiFallback: true
}
};
}
module.exports = createWebpackConfig();

更新：找到了修复程序！https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers?fbclid=IwAR1zVoZK_jSBXnpDdH3aXO_vwNyDoYoOmdhbXkGcsxh9QNmziHn19Gw6KmA

我正在运行Ubuntu，inotify出现了问题。现在大家都很开心。来自链接的摘要：在Linux上，Listen默认使用inotify来监视目录的更改。您可以监视的文件数量受到系统限制的情况并不少见。例如，UbuntuLucid的(64位)inotify限制设置为8192。

修复：运行命令以增加限制。在下面找到，并且是依赖于操作系统的

来自链接：

如果你对技术细节不感兴趣，只想得到听工作：

如果您正在运行Debian、RedHat或其他类似的Linux分发，请在终端中运行以下操作：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

如果您正在运行ArchLinux，请运行以下命令(请参阅在这里https://www.archlinux.org/news/deprecation-of-etcsysctlconf/原因)：

echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

然后将其粘贴到您的终端中，然后按enter键运行它。的技术细节

在Linux上，Listen默认使用inotify来监视目录的更改。您可以监视的文件数量受到系统限制的情况并不少见。例如，UbuntuLucid的(64位)inotify限制设置为8192。

您可以通过执行以下操作来获得当前inotify文件监视限制：

$ cat /proc/sys/fs/inotify/max_user_watches

当此限制不足以监视目录中的所有文件时，必须增加此限制才能使侦听正常工作。

您可以使用设置新的临时限制

$ sudo sysctl fs.inotify.max_user_watches=524288
$ sudo sysctl -p

如果你想让你的限制永久化，请使用：

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -p

如果Listen不断抱怨，您可能还需要注意max_queued_events和max_user_instances的值。

相关内容

最新更新

热门标签：