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

Question

The webpack in my project runs successfully but when I reach to the desired port, it shows me the directory files. 我的项目中的webpack成功运行，但是当我到达所需的端口时，它会显示目录文件。 You can look at the image for the same. 你可以看一下图像。

My webpack.config.js 我的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 的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 main.js

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

app.js 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

output==> 输出==>

Any help would be appreciated. 任何帮助，将不胜感激。

Answer 1

edited answer: I was able to get it to work: 编辑回答：我能够让它工作：

1) create the actual dist directory under the root folder 2) make your output in your webpack.config.js look like this: 1）在根文件夹下创建实际的dist目录2）使你的webpack.config.js中的输出看起来像这样：

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

it will tell webpack from where to serve your application. 它将告诉webpack从哪里为您的应用程序提供服务。

3) add the following script to your package.json 3）将以下脚本添加到package.json中

    "build": "webpack -p"

it will build the bundle.js file 它将构建bundle.js文件

also, you will need an index.html file in your dist directory that looks like this: 另外，您需要在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>

then, you run your build script and after that you can run the webpack server and it should work 然后，你运行你的构建脚本，然后你可以运行webpack服务器，它应该工作

Answer 2

更改import语句以import App from './app.js'

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

问题描述

2 个解决方案

解决方案1
0 2017-06-13 07:59:21

解决方案2
0 2019-03-30 14:12:25

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

问题描述

2 个解决方案

解决方案1 0 2017-06-13 07:59:21

解决方案2 0 2019-03-30 14:12:25

解决方案1
0 2017-06-13 07:59:21

解决方案2
0 2019-03-30 14:12:25