Question

我正在使用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 ），但是由于某种原因它没有发送它。我的路线有问题吗？

是因为我在这里使用绝对路径而不是相对路径吗？如果是这样，那么路径模块是这里最好使用的模块吗？

我们将不胜感激。

Answer 1

<script type="text/javascript" src="../dist/bundle.js"></script>中的路径错误。

正如您在浏览器的错误日志中所看到的，是找到文件/dist/bundle.js。

这样做的原因是您将dist的内容安装到了根目录。因此index.html和bundel.js在同一个地方。从那开始，它必须是src="bundle.js"

您还可以将dist的内容安装到子路径：

app.use('/js', express.static(path.resolve('dist')));

如果要这样做，则必须为src="/js/bundle.js"

html文档中的URL必须匹配您在express js中定义路由的方式，而不是它们在文件系统中的定位方式。

Express无法找到Webpack捆绑包

1 个答案: