个人中心
gpt4 book ai didi

reactjs - Webpack 已成功编译但未在浏览器中显示输出

转载 作者：行者123 更新时间：2023-12-02 15:15:58 25 4
gpt4 key购买 nike

我的项目中的 webpack 运行成功，但是当我到达所需的端口时，它会显示目录文件。您可以查看相同的图像。

enter image description here

我的 webpack.config.js 

const path = require('path');

module.exports = {
  entry: './app/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    port: 8100
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

package.json

{
  "name": "react_router",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "vinay",
  "license": "ISC",
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^2.0.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

main.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
ReactDOM.render(<App />, document.getElementById('root'));

app.js

import React, {Component} from 'react';
import {Router, Route, Link, IndexRoute, hashHistory, browserHistory} from 'react-router';

const App = () => <h1>Hello World</h1>

export default App

输出==>

enter image description here

如有任何帮助，我们将不胜感激。

最佳答案

编辑后的答案:我能够让它工作:

1) 在根文件夹下创建实际的dist目录2)使 webpack.config.js 中的输出如下所示:

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: '/dist/'
},

它将告诉 webpack 从哪里为您的应用程序提供服务。

3) 将以下脚本添加到 package.json

    "build": "webpack -p"

它将构建bundle.js文件

此外，您的 dist 目录中还需要一个如下所示的 index.html 文件:

<!DOCTYPE html>
  <html lang="en">
    <head>
     <meta charset="UTF-8">  
     <title>Application<title>
   </head>
   <body>
     <div id="app"></div>
     <script src="bundle.js"></script>
   </body>
</html>

然后，运行构建脚本，然后运行 ​​webpack 服务器，它应该可以工作

关于reactjs - Webpack 已成功编译但未在浏览器中显示输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44515434/

25 4 0
文章推荐： mysql - Grails Spring Security-每当应用程序重新启动时，用户和角色表都会被删除
文章推荐： php - Facebook api 2.7 - 未指定指标
文章推荐： java - 处理多部分/表单数据请求时，Spring Boot 1.3.7 中的文件始终为空
文章推荐： sql-server - 使用 select 语句将 Datetime 转换为 int
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com