Express无法找到Webpack捆绑包

Question

I'm running an app with Node, Express.js, Webpack, and Handlebars. 我正在使用Node，Express.js，Webpack和Handlebars运行应用程序。 I've looked all around for the answer, but none have been helpful. 我到处都在寻找答案，但是没有一个有帮助。 Here is my file structure. 这是我的文件结构。

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

I know Express is pulling from the right locations in my server.js file: 我知道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'));
});

Here is my webpack.config.js: 这是我的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'
                ]
            }
        ]
    },
};

And my index.html: 还有我的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>

Here is my package.json: 这是我的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"
  }
}

I can confirm Webpack is building the bundle. 我可以确认Webpack正在构建捆绑包。 In the browser, it has two errors: 在浏览器中，它有两个错误：

#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 is sending my index.html file but it's not sending the bundle with it. Express正在发送我的index.html文件，但未发送文件包。 I have app.use( bundle.js ) in my server.js file but it's not sending it for some reason. 我的server.js文件中有app.use（ bundle.js ），但是由于某种原因它没有发送出去。 Is there something wrong with my pathing? 我的路线有问题吗？

Is it due to the fact that I'm using absolute paths here instead of relative paths? 是否由于我在这里使用绝对路径而不是相对路径？ If so, is the path module the best to be using here? 如果是这样，那么路径模块是这里最好使用的模块吗？

Any and all help would be appreciated. 任何和所有帮助将不胜感激。

Answer 1

The path in <script type="text/javascript" src="../dist/bundle.js"></script> is wrong. <script type="text/javascript" src="../dist/bundle.js"></script>错误。

As you can see in the error log of the browser it is to find the file /dist/bundle.js . 如您在浏览器的错误日志中所看到的，是找到文件/dist/bundle.js 。

The reason for that is that you mount the content of dist to the root. 这样做的原因是您将dist的内容安装到了根目录。 So index.html and bundel.js are on the same lavel. 所以index.html和bundel.js在同一个地方。 As of that it has to be src="bundle.js" src="bundle.js" ，它必须是src="bundle.js"

You could also mount the content of dist to a subpath: 您还可以将dist的内容安装到子路径：

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

If you would do that then it would have to be src="/js/bundle.js" 如果要这样做，则必须为src="/js/bundle.js"

The URLs in the html document have to match how you define the routes in express js and not how they are located in the file system. html文档中的URL必须匹配您在express js中定义路由的方式，而不是它们在文件系统中的定位方式。

Express无法找到Webpack捆绑包

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-09-02 18:36:09

Express无法找到Webpack捆绑包

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-09-02 18:36:09

解决方案1
1 已采纳 2018-09-02 18:36:09