Webpack devServer没有生成输出文件？

Question

我正在学习 Webpack 并尝试使用插件 webpack-dev-server。我正在通过尝试更改 webpack.config.js 中的设置来学习。

更改前：

output: {
  path: path.resolve(__dirname, 'dist')
},
devServer: {
  contentBase: path.join(__dirname, 'dist')
  // ...
}

改动后：

output: {
  path: path.resolve(__dirname, '/dist/')
},
devServer: {
  contentBase: path.join(__dirname, '/dist/'),
  open: true,
  // ...
}

结果：

• dist/ 文件夹未在我的项目文件夹中生成。
• 当浏览器仍处于打开状态并为应用了 .js 的页面提供服务时。

所以看起来dist 文件夹是在其他地方生成的？我也在考虑这是因为我的output { path: ... } 或devServer: { contentBase: ... } 设置错误。

顺便说一句，如果这两个路径设置错误，html-webpack-plugin 会在临时文件夹中生成输出吗？

Answer 1

问题 - 答案：

所以看起来 dist 文件夹是在其他地方生成的？ [...]

是的。来自GitHub thread：

请注意，webpack-dev-server 是按设计在内存中运行的。 [...]

---

我也在考虑这是因为我的output { path: ... } 或devServer: { contentBase: ... } 设置错误。

是的。 node.js docs 的 path: path.resolve(__dirname, '/dist/') 将解析为 /dist。由于它位于根目录，因此将要求您提供写权限。

但是，由于您使用的是webpack-dev-server，默认情况下它不会将文件生成到您的output - path 中指定的文件夹中。

对于刚接触node.js 的人来说很重要：

比path.resolve更喜欢path.join。

比较：

path.join(__dirname, '/dist')
/* output: `/Users/path-to-your-project/dist`. */

path.resolve(__dirname, '/dist')
/* output: `/dist`. */

---

这里有一些截图可以让你更清楚：

package.json：

{
  "name": "webpack_practice",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "build": "./node_modules/.bin/webpack",
    "build:watch": "./node_modules/.bin/webpack --watch",
    "server": "./node_modules/.bin/webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.49.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

测试 1：npm run build

测试 2：npm run server