javascript - Webpack 上的新手 GET 错误，用于 http 服务器和捆绑

Question

好吧，我是一名正在学习编码的设计师。这可能是一个非常简单的问题，但我被困住了，我已经用头撞墙几个小时试图解决这个问题。

我在这里关注本教程:

https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/

它有一个与之配套的存储库:https://github.com/joezimjs/Webpack-Introduction-Tutorial

一开始我遇到了很多问题，因为“./dist”不被认为是有效路径，因为相对路径被 webpack 或其他东西禁止。将其更改为“/dist”并修复了这些内容，但后来我遇到了 babel 加载器尝试处理 Node 模块的问题，所以我排除了 Node 模块。这是仓库代码中的内容，但教程中没有，所以我花了一些时间进行挖掘。

我已经在教程中找到了示例 5，我正在尝试运行服务器以创建 html 页面，但它不起作用。我尝试过复制并粘贴所有原始代码，但它不起作用。服务器运行，但是当我访问 localhost:8080 时，它从 GET/ 收到 404 错误(我猜这基本上意味着它应该通过 http 方法获取的任何路径都不起作用？)

这是我的存储库的链接:

https://github.com/thedonquixotic/webpack-practice

这是我的 config.json 文件:

    {
      "name": "webpack-practice",
      "version": "1.0.0",
      "description": "project to practice webpack",
      "main": "index.js",
      "scripts": {
        "prebuild": "del-cli dist -f",
        "build": "webpack",
        "server": "http-server ./dist",
        "start": "npm run build -s && npm run server -s"
      },
      "author": "David Aslan French",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.4",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "del-cli": "^1.1.0",
        "handlebars": "^4.0.11",
        "handlebars-loader": "^1.7.0",
        "html-webpack-plugin": "^3.2.0",
        "http-server": "^0.11.1",
        "webpack": "^4.12.0",
        "webpack-cli": "^3.0.8"
      },
      "dependencies": {
        "lodash": "^4.17.10"
      }
    }

这是我的 webpack.config.js 文件:

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: [
        'babel-polyfill',
        './src/main.js'
    ],
    output: {
        path: '/dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/,
                options: { plugins: ['transform-runtime'], presets: ['es2015'] }
            },
            { test: /\.hbs$/, loader: 'handlebars-loader', exclude: /node_modules/ }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Intro to Webpack',
            template: 'src/index.html'
        })
    ]
};

Sooooo...是的...我已经筋疲力尽了，我不知道我做错了什么。

Answer 1

是的!!!我想通了!

事情就是这样。这是一堆小事加起来。

问题的核心是 repo 使用 webpack 2，但是当我 npm install webpack 时它是 webpack 4。Webpack 4 需要 webpack-cli 而 webpack-cli 不允许相对路径。因此，如果我将 webpack.config.js 文件更改为绝对路径，它不会创建新文件夹。如果没有文件夹，就无法加载捆绑的文件，因此无法获取必要的代码。

为了获得正确的路径，我需要使用目录名并且还包括 const path =require ('path') 解决方案。我刚刚意识到 @ippi 已经建议了，虽然我尝试了目录名更改，但我没有定义 const。我对 Javascript 还很陌生，所以我并没有真正想到这样的事情。

最后它抛出了一个 index.html 错误，这只是我需要将/node_modules/添加到 babel 的排除设置中的问题。惊人的!它有效!!!!