Question

我正在使用Node.js和React.js开发一个Web应用程序。我使用webpack 4创建客户端代码的文件分配。

要创建客户端代码，我会根据建议将代码拆分为小于244Kb的文件，然后将所有这些文件加载为动态导入。为此，我将文件package.json包含以下内容：

package.json

{
  "name": "basketmetrics3",
  "version": "1.0.0",
  "description": "Basketball advanced stats",
  "main": "server.js",
  "scripts": {
    "dev-webpack": "webpack-dev-server --hot --mode development",
    "clean": "rm -rf ./dist",
    "dev": "npm run build-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
    "build-dev": "npm run clean && npm run compile-dev",
    "compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",    
    "compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
    "build": "npm run clean && npm run compile",
    "start": "npm run build && node ./dist/assets/js/main.bundle.js",
    "heroku-postbuild": "webpack -p"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "@material-ui/core": "^3.9.3",
    "@material-ui/icons": "^3.0.2",
    "bootstrap": "^4.3.1",
    "cors": "^2.8.5",
    "create-react-app": "^3.0.1",
    "cross-env": "^5.2.0",
    "d3": "^5.9.7",
    "dotenv": "^7.0.0",
    "express": "^4.17.1",
    "express-graphql": "^0.7.1",
    "graphql": "^14.4.2",
    "jquery": "^3.4.1",
    "morgan": "^1.9.1",
    "mysql2": "^1.6.5",
    "popper.js": "^1.15.0",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.10",
    "react-bootstrap-table-next": "^3.1.7",
    "react-bootstrap-table2-paginator": "^2.0.7",
    "react-dom": "^16.8.6",
    "react-multi-language": "^0.4.2",
    "react-router-dom": "^5.0.1",
    "react-simple-tooltip": "^2.6.1",
    "sequelize": "^4.44.2",
    "validator": "^10.11.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-register": "^6.26.0",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "nodemon": "^1.19.1",
    "path": "^0.12.7",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}

要在开发环境中编译并生成所有文件，请使用命令npm run dev，并执行相同的任务，但是在生产环境中，请使用命令npm run start。

我的webpack.config.babel.js文件的内容是：

webpack.config.babel.js

import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";

const devMode = process.env.NODE_ENV !== "production";

console.log("devMode: " + devMode);


module.exports = {
   entry: "./src/client/index.js", //set entry file

    output: {
        path: path.resolve("dist/assets"),
        filename: "js/[name].bundle.js",
        chunkFilename: "js/[name].bundle.js",
        publicPath: "/assets"   //It's mandatory to define this publicPath to get access to the website when we reload pages
                                //or we access to them directly with url's which have directories of second level like 
                                //http://localhost:4000/directory-level-1/directory-level-2
    },

    optimization: {
        splitChunks : {
            chunks: "all",
            minSize: 30000,
            maxSize: 100000,
        }
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/client/index.html",    //where is our template
            filename: "../index.html",              //where we are going to put our index.html inside the output directory
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }            
        }),
        new MiniCssExtractPlugin({
            filename: "css/bundle.css",
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }             
        })
    ],
    //It help us to detect errors. 
    devtool: "source-map", 
    // Set dev-server configuration
    devServer: {
        inline: true,
        contentBase: './dist', 
        port: 3000
    },

    // Add babel-loader to transpile js and jsx files
    module: { 
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:[
                    { 
                        loader: "babel-loader",
                        query: {
                            presets: [
                                "@babel/preset-react"
                            ]
                        }
                    }
                ]
            },
            {
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader, 
                    "css-loader"],
                test: /\.css$/
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "saas-loader", 
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    publicPath: "/assets/images/",
                    outputPath: "./images/"
                }
            },
            {
                test: /\.(eot|ttf|woff|woff2)$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    publicPath: "/assets/fonts/",   //It's mandatory to get access to the fonts when we reload pages or access directly
                    outputPath: "./fonts/"
                }
            }
        ]
    }

}

使用这些文件，我生成一个/ dist目录，其中clien端的所有文件均被拆分。这些文件在开发环境中可以正常工作，但是当我在生产环境中进行相同操作时，由于应用程序找不到客户端的主文件，因此出现错误。

应用程序在以下路径中查找此文件： /home/josecarlos/Workspace/nodejs/basketmetrics3/dist/assets/js/main.bundle.js

但是在此方法中，将客户端代码拆分为较小的文件后，没有名为main.bundle.js的文件。拆分过程后生成的文件为：

因此，没有一个叫做main.bundle.js的人。

我如何对应用程序说必须选择哪个文件才能正确加载Web应用程序？我以前做错了什么吗？

拆分代码后找不到客户端代码

0 个答案: