Reactjs 使用dotnet core 2.0对源代码不进行更新时,webpack将继续重建
我的react项目与dotnet core 2.0和webpack有一个大问题。我在终端中使用dotnet run命令,并显示一些类似的信息。在Chrome控制台中,一些信息不断产生,如下图所示。此信息由react node_模块目录中的webpack模块生成,有人能指出如何解决此问题吗?谢谢 以下是我可以提供的一些信息: package.json文件:Reactjs 使用dotnet core 2.0对源代码不进行更新时,webpack将继续重建,reactjs,webpack,asp.net-core,webpack-hmr,Reactjs,Webpack,Asp.net Core,Webpack Hmr,我的react项目与dotnet core 2.0和webpack有一个大问题。我在终端中使用dotnet run命令,并显示一些类似的信息。在Chrome控制台中,一些信息不断产生,如下图所示。此信息由react node_模块目录中的webpack模块生成,有人能指出如何解决此问题吗?谢谢 以下是我可以提供的一些信息: package.json文件: { "name": "dotnetcore", "private": true, "version": "0.0.0",
{ "name": "dotnetcore", "private": true, "version": "0.0.0", "homepage": "/app/canteen/employee", "devDependencies": {
"@types/history": "4.6.0",
"@types/react": "15.0.35",
"@types/react-dom": "15.5.1",
"@types/react-hot-loader": "3.0.3",
"@types/react-router": "4.0.12",
"@types/react-router-dom": "4.0.5",
"@types/webpack-env": "1.13.0",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-router-dom": "4.1.1",
"style-loader": "0.18.2",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"moment": "^2.18.1",
"react-datetime": "^2.10.1",
"react-mobile-datepicker": "^3.0.6",
"react-mobile-picker": "^0.1.10",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-scripts": "1.0.13",
"react-time": "^4.3.0",
"redux": "^3.7.2" } }
webpack.config.js文件
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
// entry: { 'main': './ClientApp/index.js' },
entry: { 'main': './ClientApp/boot.tsx' },
resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
module: {
rules: [
{ test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
{ test: /\.js?$/, loader: 'babel-loader', exclude: /node_modules/,
query:
{
presets:['react','es2015']
}
},
]
},
plugins: [
new CheckerPlugin(),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin()
// new webpack.optimize.UglifyJsPlugin(),
// new ExtractTextPlugin('site.css')
])
}];
};
我也有同样的问题和几乎相同的网页设置(我们都使用dotnet core起始模板) 我无法解释导致不断重新加载的原因,但我能够通过在每次运行
dotnet
之前或运行时“清理”构建文件来解决它。当触发时,dotnet run
似乎正在运行一次基本的webpack命令。这意味着您的前端文件将重新构建(在ClientApp/dist和wwwroot/dist中)。如果在运行dotnet run
之前删除所有这些文件,那么问题就会消失。(警告:不要删除供应商。*
文件,因为主网页配置文件不会重建这些文件。这些文件需要webpack.config.vendor.js脚本,并且在运行dotnet run
时不会自动运行)
您可以使用自动化此删除/清理过程。下面是使用该插件时我的webpack.config.js的一个片段:
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = (env) => {
const clientBundleOutputDir = './wwwroot/dist';
const serverBundleOutputDir = './ClientApp/dist';
const cleanOptions = {
options: {
exclude: ['vendor.js', 'vendor.css', 'vendor-manifest.json'],
verbose: true,
},
pathsToClean: [clientBundleOutputDir, serverBundleOutputDir],
};
//.....
const clientBundleConfig = {
// ... some webpack settings ...
plugins: [
//.... array of some plugins....,
new CleanWebpackPlugin(cleanOptions.pathsToClean, cleanOptions.options),
],
// ... some more webpack settings ...
}
// ....
return [clientBundleConfig];
}
这种方法有一个警告-我发现使用这种技术会受到影响,
dotnet run
将通过网页包脚本(删除并重建文件)运行,并启动kestrel服务器和浏览器来运行应用程序。Kestrel开始启动,网页试图在webpack完成重建文件之前加载,因此您在浏览器中看到的第一个页面会抱怨找不到应用程序的JS文件。因此,您必须等待几秒钟,等待webpack完成,然后重新加载页面。这并不理想,但至少不需要不断地重新加载。不是每次都修改Webpack来清理所有文件,而是在发现Webpack进入此热模块替换(HMR)循环时应用此解决方案。我注意到重命名文件时会发生这种情况,导致HMR机制变得混乱。您可以应用我的答案中的解决方案。我的持续重建解决方案是重新安装“rm-rf节点模块”和“npm安装”。嗨,Timothy,谢谢您的回复。伟大的解决方案!好吧,在与dotnet core合作几个月后,我认为将React与dotnet结合是一场噩梦。我的项目很重,调试也很慢。前端代码和后端代码混乱在一起…可能是因为我缺乏一些经验或代码优化,但我更喜欢使用香草反应。