Question

最后，我将我的react项目的渲染更改为服务器端渲染。最大的问题是如何将SCSS文件添加到项目中（转换为CSS）。当前的状态是，一切工作正常。我无法处理一个问题。我有用于客户端渲染的webpack脚本（为了启用Java脚本），即使没有任何变化（我添加了“ --watch”，但也没有任何变化），它仍可以无限循环地运行。

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 / style，我不确定，但是您的Webpack可能正在监视public目录，请尝试将输出更改为此：

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

希望这会有所帮助。

劳埃德

在React项目的无限循环中运行的webpack脚本

1 个答案: