Как я могу настроить React / Redux и SASS с HMR? - PullRequest
0 голосов
/ 07 января 2020

Я успешно настроил React / Redux с использованием SASS, но мне не удалось заставить работать HMR. Я могу настроить его так, чтобы он отображал

 [HMR] Waiting for update signal from WDS...
 [WDS] Hot Module Replacement enabled.
 [WDS] Live Reloading enabled.

. Если я затем изменяю некоторые значения CSS и сохраняю, я получаю

 [WDS] App updated. Recompiling...
 [WDS] App hot update...
 [HMR] Checking for updates on the server...
  GET http://localhost:8080/96d3e8c3004cc4b12d7a.hot-update.json 404 (Not Found)
 [HMR] Cannot find update. Need to do a full reload!
 [HMR] (Probably because of restarting the webpack-dev-server)

. Я слишком упростил свою текущую настройку, удалив Redux, и я по-прежнему получить те же результаты. Мои файлы следующие:

webpack.config. js

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
process.env.NODE_ENV = process.env.NODE_ENV || "development";

if (process.env.NODE_ENV === "test") {
    require("dotenv").config({ path: ".env.test" });
}   else if (process.env.NODE_ENV === "development") {
    require("dotenv").config({ path: ".env.development" });
}

module.exports = (env) => {
    const isProduction = env === "production";
    return {
        watch: true,
        entry: "./src/app.js",
        output: {
            path: path.resolve(__dirname, "public", "dist"),
            filename: "bundle.js"
        },
        module: {
            rules: [{
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            }, {
                test: /\.s?css$/,
                use: [
                    isProduction ? MiniCssExtractPlugin.loader : "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        }
                    }
                ]
                }
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "styles.css"
            }),
            new webpack.DefinePlugin({
                "process.env.FIREBASE_API_KEY": JSON.stringify(process.env.FIREBASE_API_KEY),
                "process.env.FIREBASE_AUTH_DOMAIN": JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
                "process.env.FIREBASE_DATABASE_URL": JSON.stringify(process.env.FIREBASE_DATABASE_URL),
                "process.env.FIREBASE_PROJECT_ID": JSON.stringify(process.env.FIREBASE_PROJECT_ID),
                "process.env.FIREBASE_STORAGE_BUCKET": JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
                "process.env.FIREBASE_MESSAGING_SENDER_ID": JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID),
            }),
            new webpack.HotModuleReplacementPlugin()
        ],
        mode: "none",
        devtool: isProduction ? "source-map" : "inline-source-map",
        devServer: {
            contentBase: path.join(__dirname, "public"),
            publicPath: "/dist/",
            hot: true,
            historyApiFallback: true,
            proxy: {
                "/api": "http://localhost:8081"
            }
        }
    }
}

app. js

import "react-hot-loader";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import AppRouter, { history } from "./routers/AppRouter";
import configureStore from "./store/configureStore";
import 'bootstrap/dist/css/bootstrap.min.css';
import "normalize.css/normalize.css";
import "react-dates/lib/css/_datepicker.css";
import "./styles/styles.scss";
import Test from "./Test"


const store = configureStore();
const jsx = (
    <Provider store={store}>
        <AppRouter history={history} />
    </Provider>
);

//ReactDOM.render(jsx, document.getElementById("app"));

ReactDOM.render(<Test />, document.getElementById("app"))

Тест. js

import React from "react"
import { hot } from 'react-hot-loader/root';
const Test = () => <div className="test">Hello World!</div>;
export default hot(Test);

пакет. json

{
  "name": "third-day-ranch",
  "version": "1.0.0",
  "main": "server.js",
  "license": "MIT",
  "scripts": {
    "start": "node server.js",
    "start-dev": "concurrently \"yarn server\" \"yarn dev-server\"",
    "server": "nodemon server.js",
    "client": "yarn run start --prefix client",
    "heroku-postbuild": "yarn run build:prod",
    "build:dev": "webpack",
    "build:prod": "webpack -p --env production",
    "dev-server": "webpack-dev-server --hotOnly",
    "test": "cross-env NODE_ENV=test jest --config=jest.config.json"
  },
  "dependencies": {
    "animated": "^0.2.2",
    "axios": "^0.18.0",
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "7",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.1.3",
    "commander": "^2.18.0",
    "concurrently": "^4.0.1",
    "express": "^4.16.3",
    "firebase": "^5.5.2",
    "formidable": "^1.2.1",
    "gsap": "^2.0.2",
    "history": "^4.7.2",
    "mini-css-extract-plugin": "^0.4.0",
    "moment": "^2.21.0",
    "node-sass": "^4.9.4",
    "nodemailer": "^4.6.8",
    "nodemon": "^1.18.4",
    "normalize.css": "^8.0.1",
    "numeral": "^2.0.6",
    "raf": "^3.4.0",
    "react": "^16.12.0",
    "react-addons-shallow-compare": "^15.6.2",
    "react-dates": "^21.5.1",
    "react-dom": "^16.12.0",
    "react-fontawesome": "^1.6.1",
    "react-modal": "^3.3.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^5.1.2",
    "react-router-page-transition": "^3.1.0",
    "react-router-redux": "^4.0.8",
    "react-scroll-to-component": "^1.0.2",
    "react-transition-group": "^2.5.0",
    "reactstrap": "^6.4.0",
    "redux": "^4.0.0",
    "redux-mock-store": "^1.5.1",
    "redux-thunk": "^2.2.0",
    "styled-components": "^3.4.9",
    "to-json": "^0.5.0-prerelease",
    "uuid": "^3.2.1",
    "validator": "^10.8.0",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2"
  },
  "devDependencies": {
    "cross-env": "^5.1.4",
    "css-loader": "^3.4.1",
    "dotenv": "^6.0.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.3",
    "jest": "^23.6.0",
    "react-hot-loader": "^4.12.18",
    "react-test-renderer": "^16.2.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.1.2",
    "webpack-dev-server": "^3.1.1"
  }
}

Я пытался понять это включалось и выключалось какое-то время, но я не мог понять, где я иду не так. Спасибо за любую помощь.

...