我正在尝试使用webpack构建一个react项目但是由于webpack.config.js中的一些错误或问题而未创建bundle.js.App目录如下所示。
应用目录结构
=>公众
- 脚本
- 客户
--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无法找到合适的目录。让我知道可以做些什么。
答案 0 :(得分:0)
我是webpack / React设置的新手。然而;如果您正在尝试设置反应环境。我建议按照以下视频的前10分钟,它将帮助您设置您的环境,但从我的理解,该过程实际上并没有创建一个bundle.js文件,并以某种方式在webpack配置中完成它。祝你好运
https://www.youtube.com/watch?v=IR6smI_YJDE&index=1&list=PLbeWHDJFd79RXvAeGaDXMmxL_tkb3MvdH
答案 1 :(得分:0)
我认为这是由于package.json文件的脚本对象中缺少一些键值对。