webpack - 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: ... }or设置错误devServer: { contentBase: ... }。

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

Answer 1

问题 - 答案：

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

是的。从一个GitHub 线程：

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

---

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

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

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

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

比. path.join_path.resolve

比较：

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

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

---

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

包.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