我和dotnet core2.0和webpack的react项目有一个很大的问题。我在终端中使用dotnet run命令,并显示如下信息。在Chrome控制台中,会不断产生一些信息,如下图所示。此信息是由react node_module目录中的webpack模块生成的,有人能指出我如何解决此问题吗?谢谢!
下面是我可以提供的一些信息:terminal information
package.json文件:
{ "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')
])
}];
};
发布于 2018-02-03 03:10:54
我也遇到了同样的问题,并且使用了几乎相同的webpack设置(我们都使用的是dotnet核心启动模板)。
我无法解释是什么导致了不断的重新加载,但我能够通过在每次运行dotnet run
之前或每次运行时“清理”我的构建文件来解决这个问题。在触发时,dotnet run
似乎正在运行基本的webpack命令一次。这意味着您的前端文件被重新构建(在ClientApp/dist和wwwroot/dist中)。如果在运行dotnet run
之前删除所有这些文件,那么问题就会消失。(警告:请勿删除vendor.*
文件,因为主webpack配置文件不会重新构建这些文件。你需要这些的webpack.config.vendor.js脚本,当你运行dotnet run
时,它不会自动运行)。
您可以使用clean-webpack-plugin自动执行此删除/清理过程。下面是我的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
将通过webpack脚本运行(删除文件并重新构建它们),并启动kestrel服务器和浏览器来运行您的应用程序。Kestrel开始工作,页面试图在webpack完成文件重建之前加载,所以你在浏览器中看到的第一个页面see会抱怨找不到你的应用程序的JS文件。因此,您必须等待几秒钟,让webpack完成,然后重新加载页面。这并不理想,但至少不再需要不断地重新加载。
发布于 2018-03-11 22:07:51
您可以在发现进入此热模块更换(HMR)循环时应用此解决方案,而不是每次都将Webpack修改为清除所有文件。我注意到在重命名文件时会发生这种情况,导致HMR机制变得混乱。您可以应用my answer here中的解决方案。
发布于 2019-05-15 03:41:11
对于不断重建,我的解决方案是再次'rm -rf node_modules‘和'npm install’。
https://stackoverflow.com/questions/46262436
复制相似问题