【发布时间】：2018-09-02 18:28:36
【问题描述】：
我正在运行一个包含 Node、Express.js、Webpack 和 Handlebars 的应用程序。我已经四处寻找答案，但没有一个有帮助。这是我的文件结构。
Handlebars (top folder)
dist
bundle.js
node_modules
routes
src
css
input-elements.css
main.css
js
app.js
dom-loader.js
server.js
index.html
package.json
package-lock.json
webpack.config.js
我知道 Express 从我的 server.js 文件中的正确位置提取：
const hbs = require('express-handlebars');
const path = require('path');
const express = require('express');
const app = express();
const port = 8080;
app.set('port', port || 9001);
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../index.html'));
});
app.use(express.static(path.resolve('dist')));
app.listen(app.get('port'), function () {
console.log('Web server listening on port ' + app.get('port'));
});
这是我的 webpack.config.js：
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: path.join(__dirname, './src/js/app.js'),
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
};
还有我的 index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webpack 2 Basics</title>
<script type="text/javascript" src="../dist/bundle.js"></script>
</head>
<body>
<h1>Let's learn Webpack 2</h1>
<button id="secret-button">Show the Secret</button>
<p id="secret-paragraph">You can't see this all the time</p>
</body>
</html>
这是我的 package.json：
{
"name": "handlebars",
"version": "1.0.0",
"description": "",
"main": "./src/js/app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "concurrently \"webpack -p\" \"nodemon ./src/js/server.js --ext html,scss,css,js,json\""
},
"author": "",
"license": "ISC",
"devDependencies": {
"concurrently": "^4.0.1",
"css-loader": "^1.0.0",
"express": "^4.16.3",
"express-handlebars": "^3.0.0",
"nodemon": "^1.18.4",
"style-loader": "^0.23.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}
我可以确认 Webpack 正在构建捆绑包。在浏览器中，有两个错误：
#1: Failed to load resource: the server responded with a status of 404 (not
found) --> referring to bundle.js
#2: Refused to execute script from 'http://localhost:8080/dist/bundle.js'
because its MIME type ('text/html') is not executable, and strict MIME type
checking is enabled.
Express 正在发送我的 index.html 文件，但它没有与它一起发送捆绑包。我的 server.js 文件中有 app.use(bundle.js) 但由于某种原因它没有发送。我的路径有问题吗？
是不是因为我在这里使用的是绝对路径而不是相对路径？如果是这样，这里最好使用路径模块吗？
我们将不胜感激。
【问题讨论】：
标签： javascript node.js express webpack