Min*_*ham 5 node.js reactjs webpack
[UPDATE] bundle.js实际上是在内存中创建的.最好的方法是将index.html和bundle.js(在webpack.config.js中配置)保存在同一目录中以避免任何问题.
我一直试图用webpack渲染一个简单的html文件,但无法弄清楚为什么我得到404.我明白找不到bundle.js所以我尝试了不同的路径,但它没有用,任何想法?
我很感激你的帮助.谢谢.
app.js
var express = require('express')
var path = require('path')
const app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html')
app.get('/', function (req, res) {
res.render('index')
})
app.listen(3000, () => console.log('Example app listening on port 3000!'))
Run Code Online (Sandbox Code Playgroud)
webpack.config.js
module.exports = {
entry: ['./src/index.js'],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
[...]
Run Code Online (Sandbox Code Playgroud)
的index.html
<!DOCTYPE html>
<html>
[...]
<body>
<div class="container"></div>
</body>
<script src="./bundle.js"></script>
</html>
Run Code Online (Sandbox Code Playgroud)
文件夹结构
您没有指定正确的index文件路径。如果你有它,src directory代码将如下所示:
entry: [
path.resolve(__dirname, 'src/index')
],
[...]
Run Code Online (Sandbox Code Playgroud)
否则,如果你有它,views directory,代码将如下:
entry: [
path.resolve(__dirname, 'views/index')
],
[...]
Run Code Online (Sandbox Code Playgroud)
在你的 html 文件中是<script src="/bundle.js"></script>
更新
根据您在 github 上的代码尝试更改以下行
entry: [
path.resolve(__dirname, 'src/index')
],
devServer: {
contentBase: path.resolve(__dirname, 'src')
},
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
Run Code Online (Sandbox Code Playgroud)
问题在于你path.resolve(...)在你的entry point和你的devServer具体情况中都错过了
希望有帮助:)
| 归档时间: |
|
| 查看次数: |
778 次 |
| 最近记录: |