javascript - 未生成 Webpack 捆绑文件

标签 javascript reactjs webpack webpack-dev-server

我只是 webpack 和 react 的新手,只是浏览了文档并创建了一个可以工作的示例。不幸的是我卡住了,无法继续。问题是未生成捆绑文件。 我创建的文件是

package.json

{
  "name": "rohith",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config.js

module.export = {
    entry : './main.js',
    output : {
        path : './',
        filename : 'index.js'
    },
    devServer : {
        inline : true,
        port : 3333
    },
    module : {
        loaders : [
            {
                test : /\.js$/,
                exclude : /node_modules/,
                loader : 'babel',
                query : {
                    presets : ['es2015','react']
                }
            }
        ]
    }
}

App.js

import React from 'react';
class App extends React.Component {
    render(){
        return <div>Hello</div>
    }
}

export default App

ma​​in.js

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

index.html

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

我得到那个包是有效的,但没有生成 index.js。 无法在本地主机 3333 中运行

谢谢,

最佳答案

我认为问题是你没有给出绝对输出路径。

试试这个:

var path = require('path');

module.exports = {
    entry : './main.js',
    output : {
        path : path.join(__dirname, './'),
        filename : 'index.js'
    },
    devServer : {
        inline : true,
        port : 3333
    },
    module : {
        loaders : [
            {
                test : /\.js$/,
                exclude : /node_modules/,
                loader : 'babel',
                query : {
                    presets : ['es2015','react']
                }
            }
        ]
    }
}

希望对您有所帮助:)

关于javascript - 未生成 Webpack 捆绑文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40826879/

相关文章:

javascript - React Native - 专注于下一个 TextInput 字段

reactjs - 使用 SVG 的 React Icon 组件

webpack - 与 webpack 捆绑时,material-ui 应该如何外部化

javascript - 在所有这些情况下提取 id

javascript - 使用 jQuery 验证插件检查 Google 可视化 api 查询调用的数组

javascript - 下拉菜单在 IE 中无法正常工作 - 向右射击

javascript - 如何从javascript中的其他函数访问变量

javascript - React 导航 - 如何导航到数据源中的特定索引

javascript - 如何使用 webpack 的 worker loader 加载 web worker

node.js - 用于 vue-cli 的 Webpack 开发服务器 : Error spawn EACCES