首页 > 解决方案 > React:Webpack 返回不能/Get

问题描述

我是 Webpack 的新手,我正在尝试从开发中提供一个页面,但我遇到了错误

不能获取

我的webpack.config.babel.js的配置是:

import webpack from "webpack";
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";

console.log("devMode: " + process.env.NODE_ENV);

const currentPath = path.join(__dirname);

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve("dist/assets"),
        filename: "js/[name].bundle.js",
        chunkFilename: "js/[name].bundle.js",
        //publicPath: "/"   //It's mandatory to define this publicPath to get access to the website when we reload     
    },
    devtool: "source-map",
    devServer: {
        inline: true,
        contentBase: './dist', 
        port: 3000,
        open: true, //Open web browser by default
        historyApiFallback: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",    //where is our template
            filename: "../index.html",              //where we are going to put our index.html inside the output directory
            //favicon: "./src/client/img/favicon-96x96.png",
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }            
        }),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-react"]
                        }
                    }
                ]
            }
        ]
    }
};

文件结构如下:

在此处输入图像描述

我的 package.json 代码文件是:

{
  "scripts": {
    "clean": "rm -rf ./dist",
    "_comment0": "Script para arrancar webpack como servidor de desarrollo del front-page",
    "dev-webpack": "NODE_ENV=development webpack serve --mode development --env development --hot",
  },
  "dependencies": {
    "morgan": "^1.10.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "@babel/register": "^7.12.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.0.0",
    "jshint": "^2.12.0",
    "path": "^0.12.7",
    "regenerator-runtime": "^0.13.7",
    "serve": "^11.3.2",
    "webpack": "^5.20.1",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}

要启动 webpack 服务器,我使用以下命令:npm run dev-webpack

我究竟做错了什么?

标签: reactjswebpackwebpack-dev-server

解决方案


推荐阅读