反应项目无限循环中的 webpack 脚本运行

Question

最后，我将我的 React 项目的渲染更改为服务器端渲染。最大的问题是如何将我的 SCSS 文件添加到我的项目中（转换为 CSS）。目前的状态是一切都很好。有一个问题我无法处理。我有用于客户端渲染的 webpack 脚本（为了启用 java 脚本），即使没有任何改变（我添加“--watch”，但没有任何改变）保持运行ning 无限循环.

webpack 文件如下： webpack.client.js

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const autoprefixer = require('autoprefixer');
const cssConfig = require('./webpack.cssConfig');


const config = {
//Tell webpack the root file of our server application
entry: './src/client/client.js',

//Tell webpack whre to put the output file
// that is generated
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
},
module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: [
            'react',
            'stage-0',
            ['env', { targets: { browsers: ['last 2 versions']}}]
          ]
        }
      }
    ]
  }
};

module.exports = merge(baseConfig, config);

webpack.client.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CSSExtract = new ExtractTextPlugin('styles.css');


module.exports = {
//Tell webpack to run babel on every file it runs trough
module: {
    rules: [
        {   
            test: /\.js?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
                presets: [
                    'react',
                    'stage-0',
                    ['env', {targets: {browsers:['last 2 versions']}}]
                ]
            }
        },
            {
                test: /\.s?css$/,
                use: CSSExtract.extract({
                  use: [
                    {
                      loader: 'css-loader',
                    },
                    {
                      loader: 'sass-loader',
                    }
                  ]
                })
              }]
            },
            plugins: [
              CSSExtract
            ]
  };

这就是我开始运行脚本 "dev:build-client" 时发生的情况："webpack --config webpack.client.js --watch"

所以每两秒循环一次。

Answer 1

它似乎在 public/styles 上重复循环，我不能确定，但有可能你的 Webpack 正在监视 public 目录，尝试将你的输出更改为：

  output: {
    path: path.join(__dirname, '/dist/'),
    filename: 'bundle.js',
    publicPath: '/public'
  }

希望对您有所帮助。

劳埃德

反应项目无限循环中的 webpack 脚本运行

webpack script running in infinity loop in react project

reactjs

webpack

webpack-dev-server

反应项目无限循环中的 webpack 脚本 运行

webpack script running in infinity loop in react project

reactjs

webpack

webpack-dev-server

反应项目无限循环中的 webpack 脚本运行