javascript - 为什么 Webpack 4 不创建 dist 文件夹但 webpack 2 会创建？

Question

好吧，我是一名学习编码的设计师，所以请原谅我的无知。

我正在尝试使用本教程学习 webpack:https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/

本教程的仓库在这里:https://github.com/joezimjs/Webpack-Introduction-Tutorial

我所做工作的 repo 在这里:https://github.com/thedonquixotic/webpack-practice

在学习本教程的过程中，我遇到了一些问题，我认为主要是由于 webpack 的更改。我目前正在使用示例 5(存储库在流程中的每个步骤都有分支)。

我已经对此进行了大量的故障排除，我想我终于找到了原因!

当我输入 npm run 时，服务器启动了，但 dist 文件夹没有创建，当我访问页面时服务器抛出一个 http 方法错误，它找不到模板.

我仔细检查了所有内容，发现两者之间的关键区别在于教程 repo 加载 webpack 2，而我的 repo 加载 webpack 4。当我加载 webpack 4 时，我是添加 webpack-cli 和在 webpack.config.js 中指定为“./dist”的输出的相对路径不再有效。

如果我不更改“./dist”，那么它会抛出一个错误，指出它需要绝对路径。如果我确实将其更改为“/dist”，那么它实际上无法创建 dist 文件夹。

既然我假设我应该使用最新版本的 Webpack 4，我该如何解决这个问题？

我已经尝试过 path.resolve(__dirname, 'dist') 并且在 webpack 4 版本上没有修复问题。

当我执行 path.resolve 解决方案时，它给了我一个不同的错误。服务器甚至不会启动。它确实创建了 dist 文件夹，但它抛出了一组新的错误(它看起来与 index.html 文件有关)它看起来像这样:

> webpack-practice@1.0.0 start /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2
> npm run build -s && npm run server -s

/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:244
                                throw err;
                                ^

ReferenceError: path is not defined
    at Object.<anonymous> (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/webpack.config.js:9:15)
    at Module._compile (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:133:13)
    at requireConfig (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:135:6)
    at /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:142:17
    at Array.forEach (<anonymous>)
    at module.exports (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/convert-argv.js:140:15)
    at yargs.parse (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:241:39)
    at Object.parse (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/node_modules/yargs/yargs.js:552:18)
    at /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:219:8
    at Object.<anonymous> (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack-cli/bin/cli.js:530:3)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/webpack/bin/webpack.js:157:2)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-practice@1.0.0 start: `npm run build -s && npm run server -s`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-practice@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/david/.npm/_logs/2018-06-20T19_12_54_953Z-debug.log

不太确定在这里做什么。

编辑:

好的，所以我发现 4 的问题是它无法解析路径，除非将其添加到顶部的 webpack 配置文件中:const path = require('path');

当我添加它时，它仍然不起作用，但会抛出一个新的错误，如下所示:

> webpack-practice@1.0.0 start /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2
> npm run build -s && npm run server -s

[BABEL] Note: The code generator has deoptimised the styling of "/mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/node_modules/lodash/lodash.js" as it exceeds the max of "500KB".
Hash: 5c8bf89bcb7897b20228
Version: webpack 4.12.0
Time: 13034ms
Built at: 06/20/2018 1:24:10 PM
     Asset      Size  Chunks             Chunk Names
 bundle.js   215 KiB       0  [emitted]  main
index.html  1.37 KiB          [emitted]
[100] (webpack)/buildin/global.js 770 bytes {0} [built]
[147] (webpack)/buildin/amd-options.js 82 bytes {0} [built]
[152] (webpack)/buildin/module.js 521 bytes {0} [built]
[248] ./src/numberlist.hbs 931 bytes {0} [built]
[250] ./src/main.js 438 bytes {0} [built]
[542] multi babel-polyfill ./src/main.js 40 bytes {0} [built]
    + 537 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

```
ERROR in   Error: /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1937
  $export($export.S + $export.F * !__webpack_require__(1), 'Object', { defineProperty: __webpack_require__(6).f });
  ^
  TypeError: $export is not a function

  - index.html:1937 Object.<anonymous>
    /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1937:1

  - index.html:21 __webpack_require__
    /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30

  - index.html:1946 Object.<anonymous>
    /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1946:1

  - index.html:21 __webpack_require__
    /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30

  - index.html:1959 Object.module.exports
    /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:1959:31

  - index.html:21 __webpack_require__
    /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30

  - index.html:175 Object.<anonymous>
    /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:175:23

  - index.html:21 __webpack_require__
    /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30

  - index.html:243 Object.<anonymous>
    /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:243:10

  - index.html:21 __webpack_require__
    /mnt/c/Users/Owner/Work/Web/Webpack-Pratice-2/src/index.html:21:30


Child html-webpack-plugin for "index.html":
     1 asset
     [46] (webpack)/buildin/module.js 521 bytes {0} [built]
     [98] (webpack)/buildin/global.js 770 bytes {0} [built]
    [100] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 492 bytes {0} [built]
        + 98 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-practice@1.0.0 start: `npm run build -s && npm run server -s`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-practice@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/david/.npm/_logs/2018-06-20T19_24_10_672Z-debug.log

Answer 1

我在我的 webpack.config.js 中使用 CleanWebpackPlugin (clean-webpack-plugin) 来创建该文件夹:

plugins: [
    new CleanWebpackPlugin(["dist"])
]

它删除并重新创建它。