Question

我在使用 webpack 开发服务器时遇到问题，当运行脚本 npm run frontend（开发期间）以查看浏览器中的更改时，它显示它已成功编译。 terminal compiled successfully

但是，自动构建和浏览器重新加载不起作用，我可以看到我在浏览器中所做的更改的唯一方法是每次保存时运行 npm run build。

我无法理解解决方案。据我了解，问题是当我运行脚本时，webpack 仍然认为我处于生产模式而不是开发模式。另一个想法是 webpack 卡住并且无法使用内存中的新捆绑文件清除内存。下面是我的 webpack.config.js 和 package.json 文件。

谢谢！

// package.json
{
  "name": "building-an-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "backend": "nodemon backend/server.js",
    "seed": "node backend/seed.js",
    "frontend": "webpack-dev-server --mode=development --env.NODE_ENV=local",
    "serve:frontend": "concurrently webpack-dev-server",
    "build": "webpack -p --mode=production --env.NODE_ENV=production",
    "mongo": "mongod --dbpath ~/data/db",
    "start": "node backend/server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.0.5",
    "bulma": "^0.9.1",
    "concurrently": "^6.0.0",
    "css-loader": "^3.5.3",
    "dotenv-webpack": "^4.0.0",
    "html-webpack-plugin": "^4.3.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0",
    "webserver": "^4.0.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.12",
    "axios": "^0.21.0",
    "bcrypt": "^5.0.0",
    "body-parser": "^1.19.0",
    "buefy": "^0.9.4",
    "bulma-calendar": "^6.0.2",
    "cloudinary-core": "^2.11.3",
    "cloudinary-react": "^1.6.8",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "file-loader": "^6.2.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.10.11",
    "mongoose-hidden": "^1.9.0",
    "mongoose-unique-validator": "^2.0.3",
    "react": "^16.13.1",
    "react-datepicker": "^3.3.0",
    "react-dom": "^16.13.1",
    "react-geocode": "^0.2.2",
    "react-map-gl": "^5.2.10",
    "react-rater": "^5.1.1",
    "react-router-dom": "^5.2.0",
    "react-select": "^3.1.0",
    "use-position": "0.0.8"
  }
}

// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const DotEnv = require('dotenv-webpack')
const env =
  process.env.NODE_ENV === 'production'
    ? new webpack.EnvironmentPlugin({ ...process.env })
    : new DotEnv()

module.exports = () => {
  return {
    entry: './frontend/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve('./backend/dist'),
      publicPath: '/'
    },
    // target: 'web',
    devtool: 'source-map',
    module: {
      rules: [
        { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        {
          test: /\.s(a|c)ss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        { test: /\.(png|jpe?g|gif)$/i, use: 'file-loader' }
      ]
    },
    devServer: {
      contentBase: path.resolve('frontend'),
      hot: true,
      open: true,
      port: 8000,
      watchContentBase: true,
      historyApiFallback: true,
      proxy: {
        '/api': {
          target: 'http://localhost:8000',
          secure: false
        }
      }
    },
    plugins: [
      new DotEnv(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.ProvidePlugin({
        React: 'react'
      }),
      new HtmlWebpackPlugin({
        template: 'frontend/index.html',
        filename: 'index.html',
        inject: 'body'
      }),
      env
    ]
  }
}

Answer 1

通过将部署之前的代码与 Heroku 进行比较，我找到了解决方案。

我记得在我开发应用程序时，API 使用了 http://localhost:8000 的代理，因此开发服务器需要一个不同的端口 8001。

现在，当我在开发过程中保存应用中的更改时，自动构建和浏览器重新加载工作。

devServer: {
      contentBase: path.resolve('frontend'),
      hot: true,
      open: true,
      port: 8001,
      watchContentBase: true,
      historyApiFallback: true,
      proxy: {
        '/api': {
          target: 'http://localhost:8000',
          secure: false
        }
      }
    },

Answer 2

您需要在监视模式下运行它。尝试在你的 package.json 中添加 --watch 像“frontend”：“webpack-dev-server --mode=development --watch --env.NODE_ENV=local”。它应该可以工作。

Webpack 开发服务器编译成功但重新加载或重建不起作用

2 个答案: