Webpack生产问题(ReactJs)

时间:2019-06-13 16:45:49

标签: reactjs webpack-4

我在webpack生产部署中遇到问题,我收到控制台错误,提示 net :: ERR_NAME_NOT_RESOLVED 。我认为我在某处缺少某些东西,但无法弄清楚。我已经尝试了几乎所有的Google搜索,但无法获得正确的提示。所以我不确定这是我的配置代码问题还是某些服务器端问题。 我已经在下面的package.json文件的脚本中附加了配置代码。我不知道我在哪里。

控制台错误: https://prnt.sc/o1giau

我在控制台中遇到以下错误

https://de-test.cc:65001/sockjs-node/info?t=1560479337759网:: ERR_NAME_NOT_RESOLVED

Package.json

"homepage": "/dev",
"scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --mode production --config webpack.prod.js",
    "serv": "webpack-dev-server --mode production --config webpack.prod.js - 
              -host dev-test.cc --port 65001"

  },
"devDependencies": {
        "@babel/core": "^7.2.2",
        "@babel/plugin-proposal-class-properties": "^7.1.0",
        "@babel/preset-env": "^7.2.3",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.5",
        "css-loader": "^2.1.0",
        "file-loader": "^3.0.1",
        "hard-source-webpack-plugin": "^0.13.1",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
        "style-loader": "^0.23.1",
        "url-loader": "^1.1.2",
        "webpack": "^4.28.3",
        "webpack-cli": "^3.2.1",
        "webpack-dev-server": "^3.1.14",
        "webpack-merge": "^4.2.1"
      }

webpack.dev.js

      const path = require('path');
      var HtmlWebpackPlugin = require('html-webpack-plugin');
      var webpack = require('webpack');

      const basename = '/dev';

      module.exports = {
          mode: 'development',
          devtool: 'inline-source-map',
          entry: {
              'app': path.resolve('./src/index.js'),
          },
          devServer: {
              // publicPath: basename,
              historyApiFallback: true,
              disableHostCheck: true,
          },
          module: {
              rules: [
                  {
                      test: /\.(js|jsx)$/,
                      exclude: /node_modules/,
                      use: {
                          loader: "babel-loader",
                      },
                  },
                  {
                      test: /\.html$/,
                      use: [
                          {
                              loader: "html-loader",
                          },
                      ],
                  },
                  {
                      test: /\.css$/,
                      use: ["style-loader", "css-loader"],
                  },
                  {
                      test: /\.(pdf|jpg|png|gif|svg|ico)$/,
                      use: [
                          {
                              loader: 'url-loader',
                          },
                      ],
                  },
                  { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
                  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
              ],
          },
          resolve:
          {
              alias: {
                  'handlebars': 'handlebars/dist/handlebars.js',
              },
          },
          output: {
              path: path.resolve(__dirname, './dist'),
              publicPath: '/',
              filename: '[name].bundle.js',
          },
          optimization: {
              runtimeChunk: {
                name: 'runtime'
              },
              splitChunks: {
                chunks: 'all',
                maxInitialRequests: Infinity,
                minSize: 0,
                cacheGroups: {
                  vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                      const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                      return `npm.${packageName.replace('@', '')}`;
                    },
                  },
                }
              },
            },
          plugins: [
              new HtmlWebpackPlugin({
                  title: 'Dev test',
                  template: './src/index.html',
                  homepage: "/dev/",
              }),
              new webpack.DefinePlugin({
                'ApiUrl': JSON.stringify('https://dev-test.cc/api/'),
                'BaseName': JSON.stringify(basename),
              }),
              new webpack.HashedModuleIdsPlugin(),
          ],
      };

webpack.prod.js

const path = require('path');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var webpack = require('webpack');

    const basename = '/dev';

    module.exports = {
      entry: {
        'app': path.resolve(__dirname, './src/index.js'),
      },
      devServer: {
        // publicPath: basename,
        historyApiFallback: true,
        disableHostCheck: true
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          },
          {
            test: /\.html$/,
            use: [
              {
                loader: "html-loader"
              }
            ]
          },
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
          },
          {
            test: /\.(pdf|jpg|png|gif|svg|ico)$/,
            use: [
              {
                loader: 'url-loader'
              },
            ]
          },
          { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
          { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
        ]
      },
      resolve:
      {
        alias: {
          'handlebars': 'handlebars/dist/handlebars.js'
        }
      },
      output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/',
        filename: '[name].[contenthash].js',
      },
      optimization: {
        runtimeChunk: {
          name: 'runtime'
        },
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 0,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                return `npm.${packageName.replace('@', '')}`;
              },
            },
          }
        },
      },
      plugins: [
        new HtmlWebpackPlugin({
          title: 'Dev test',
          template: './src/index.html',
          homepage: "/dev/",
        }),
        new webpack.DefinePlugin({
          'ApiUrl': JSON.stringify('https://dev-test.cc/api/'),
                'BaseName': JSON.stringify(basename),
          'process.env': {
            'NODE_ENV': JSON.stringify('production')
          }
        }),
        new webpack.HashedModuleIdsPlugin(),
      ],
    };

此配置文件中的 devServer 是否需要?为什么我在控制台错误中看到 webpack-dev-server 。虽然我使用了生产模式,但这只是让我感到困惑,不是吗?还是我错过了什么?

如果任何人已经通过此类或类似的产品进行生产,那么任何帮助都是非常有意义的。谢谢!

0 个答案:

没有答案