首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用dotnet core 2.0,在不对React源代码进行更新的情况下,webpack不断进行重建

使用dotnet core 2.0,在不对React源代码进行更新的情况下,webpack不断进行重建
EN

Stack Overflow用户
提问于 2017-09-17 17:15:45
回答 3查看 1.8K关注 0票数 1

我和dotnet core2.0和webpack的react项目有一个很大的问题。我在终端中使用dotnet run命令,并显示如下信息。在Chrome控制台中,会不断产生一些信息,如下图所示。此信息是由react node_module目录中的webpack模块生成的,有人能指出我如何解决此问题吗?谢谢!

下面是我可以提供的一些信息:terminal information

chrome console output

package.json文件:

代码语言:javascript
复制
{   "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文件

代码语言:javascript
复制
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')
        ])
    }];
};
EN

回答 3

Stack Overflow用户

发布于 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使用该插件时的一个片段:

代码语言:javascript
复制
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完成,然后重新加载页面。这并不理想,但至少不再需要不断地重新加载。

票数 1
EN

Stack Overflow用户

发布于 2018-03-11 22:07:51

您可以在发现进入此热模块更换(HMR)循环时应用此解决方案,而不是每次都将Webpack修改为清除所有文件。我注意到在重命名文件时会发生这种情况,导致HMR机制变得混乱。您可以应用my answer here中的解决方案。

票数 0
EN

Stack Overflow用户

发布于 2019-05-15 03:41:11

对于不断重建,我的解决方案是再次'rm -rf node_modules‘和'npm install’。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46262436

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档