捆绑 js 不是由 webpack 创建的答案

【问题标题】：bundle js not created by webpack捆绑 js 不是由 webpack 创建的
【发布时间】：2017-05-10 14:55:25
【问题描述】：

我正在尝试使用 webpack 构建一个 react 项目，但是由于 webpack.config.js 中的一些错误或问题，没有创建 bundle.js。应用程序目录如下。
应用目录结构
=>公共
--脚本
--客户端
--client.js
--组件
--App.js
--index.html
=>服务器
--server.js
=>webpack.config.js

现在，代码如下：

webpack.config.js

var webpack=require('webpack');
var pathresolver=require('path');

var BUILD_DIR=pathresolver.resolve(__dirname,'./public/scripts/client');
var APP_DIR=pathresolver.resolve(__dirname,'./public/dist');

module.exports={
    devtool:'inline-source-maps',
    entry: [
        'webpack-hot-middleware/client',
        BUILD_DIR+'/client.js'
    ],
    output:{
        path:APP_DIR,
        filename:'bundle.js',
        publicPath:'/'
    },
    plugins:[
        new webpack.optimize.OccurrenceOrderPlugin(),  
        new webpack.HotModuleReplacementPlugin(),  
        new webpack.NoErrorsPlugin()    
    ],
    module:{
        loaders:[
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:/node_modules/,
                query:{
                     presets:['react','es2015','react-hmre'] 
                }

            }
        ]
    }
}

Server.js

var express= require('express');
var path=require('path');

var app=express();


//Get webapck details
var webpackconfig=require('../webpack.config.js');
var webpack=require('webpack');
var webpackDevMiddleware=require('webpack-dev-middleware');
var webpackHotMiddleware=require('webpack-hot-middleware');


var webpackcompiler=webpack(webpackconfig);

//Use middlewares
app.use(webpackDevMiddleware(webpackcompiler,{
  noInfo:true,
  publicPath:webpackconfig.output.publicPath
}));

app.use(webpackHotMiddleware(webpackcompiler));   

app.use(express.static('../public'));



 var filename = path.resolve(__dirname,'..','public','index.html');

app.use('/', function (req, res) {
    res.sendFile(filename);
});


var port=3000;
app.listen(port,function(error){
    if(error) throw err;
    console.log("Server is running at port no "+port);
})

组件/App.js

import React,{Component} from 'react';
import {render} from 'react-dom';



class App extends Component{
    render(){
        return(
            <div>Hello My name is Jalak Vora</div>
        )    
    }
}

export default App

Client.js

import React from 'react';
import {render} from 'react-dom';
import App from '../component/App.js';



render(<App/>,document.getElementById(
    "app")
)

Index.html

<!DOCTYPE html>
<html>
<head>
        <title>Sound Wave</title>
</head>

<body>  
    <div id="app"></div>
    <script type="text/babel" src="dist/bundle.js"></script>
</body>
</html>

我很天真，但我认为问题是 webpack 无法找到正确的目录。让我知道可以做什么。

【问题讨论】：

尝试使用webpack 运行编译器，以防您遇到错误
使用“webpack”运行不会显示任何错误。尽管如此，我发现了错误，它在 server.js 的目录路由中。问题已解决。

标签： webpack

【解决方案1】：

我也是 webpack/React 设置的新手。然而;如果您正在尝试设置反应环境。我建议观看以下视频的前 10 分钟，它将帮助您设置环境，但据我了解，该过程实际上并没有创建 bundle.js 文件，而是在 webpack 配置中以某种方式完成了它。祝你好运

https://www.youtube.com/watch?v=IR6smI_YJDE&index=1&list=PLbeWHDJFd79RXvAeGaDXMmxL_tkb3MvdH

【讨论】：

【解决方案2】：

我认为这是由于 package.json 文件的脚本对象中缺少一些键值对。

【讨论】：