Webpack demo + npm run dev，localhost:8080 提示 Cannot GET/

Webpack 官网的 demo 非常简明易懂地让我们上手 Webpack。例如他们提供了清晰的项目结构，源码以及配置文件。

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

---

为了完成 webpack-demo，我们首先需要使用 npm 初始化一个项目：

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli webpack-dev-server --save-dev

因此得到一个文件夹和 npm 包管理文件：

package.json

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   "private": true,
   "scripts": {
    "dev": "webpack-dev-server --open --config webpack.config.js",
    "serve": "webpack serve --open",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
      "webpack": "^5.74.0",
      "webpack-cli": "^4.10.0",
      "webpack-dev-server": "^4.10.0"
   }
 }

不同于官网的 demo，我一开始就安装了 webpack-dev-server，以便使用 npm run dev 来启动项目，而不是手动把 index.html 在浏览器中打开。

由于我在 "scripts" 中的配置，运行 npm run dev 和 npm run serve 是等价的，都是通过 webpack-dev-server 为页面提供浏览和热更新服务。

而且，当在项目根目录下的 webpack 配置文件名为 webpack.config.js 时，可以不用通过 --config 显示指定，里面的配置会被默认读取。

我的项目结构如下：

  webpack-demo
  |- node_modules
  |- index.html
  |- main.js
  |- package.json
  |- webpack.config.js

index.html

<!doctype html>
<html>

<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>Document</title>
</head>

<body>
    <div id="app">
        <h1>hello world!!</h1>
    </div>
    <script src="/dist/main.js"></script>
</body>

</html>

main.js

// document.getElementById('app').innerHTML = 'Hello Webpack!!!';

webpack.config.js

var path = require('path');

var config = {
    devtool: 'inline-source-map',  // 显示地指出错误代码所在的地方，最好不用于生产环境
    // devServer: {  // 默认入口 index.html 文件在项目的 public 文件夹下
    //     static: './'  // 指定 SPA 的入口 index.html 文件为根目录的 index.html
    // },
    // webpack配置文件四要素: entry, output, module (加载器), plugins (插件)
    entry: {
        main: './main'  // 告诉webpack从哪里开始编译
    },
    output: {  // 这里的配置说明打包后的文件会存储为 demo_in_action/dist/main.js
        path: path.join(__dirname, 'dist'),  // 编译打包后的文件存储位置
        publicPath: '/dist/',  // 指定资源文件的路径，可以是URL
        filename: 'main.js'  // 输出文件的名称
    },
    mode: 'development'
};

module.exports = config;  // === export default config; 是ES6的语法

没有注释代码的就是我一开始运行的配置。显然，我运行了一个上午，然后不出意料总是得到一样的错误页面：

这是因为我把 index.hmtl 放在根目录下，没有通过 devServer 指定 SPA（单页应用）。不过我百思不得其解，为何不默认进入根目录的 index.html ？事实上，webpack-dev-server 默认从 public 文件夹寻找 index.html：

所以，项目结构如下，才是约定俗成的：

  webpack-demo
  |- node_modules
  |- public
    |- index.html
  |- main.js
  |- package.json
  |- webpack.config.js

npm run dev

如果这样配置：

devServer: {
    static: './dist'  // 指定 SPA 的入口 index.html 文件为 dist 目录的 index.html
}, 

那么要先通过 npm run build 来打包出 dist 目录，里面会有编译后的 main.js，这时要把 index.html 复制到里面供 server 读取，否则又会出现同样的错误，因为它不会从根目录的那个文件进入。要像这样才行：

  webpack-demo
  |- dist
  	|- index.html
  	|- main.js
  |- node_modules
  |- main.js
  |- package.json
  |- webpack.config.js

webpack-dev-server 编译后不会写入任何输出文件。它将编译后的文件保存在内存中并像是安装在服务器根路径上的真实文件一样提供它们。

即，运行 npm run dev 后在内存中编译生成了 dist/main.js，并被引用它的 index.html 读取到。