并非由webpack创建的包js

问题描述 投票:0回答:2

我正在尝试使用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无法找到正确的目录。让我知道可以做什么。

webpack
2个回答
0
投票

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

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


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.