为什么 Webpack 4 不创建 dist 文件夹但 webpack 2 会创建？
Why does Webpack 4 not create dist folder but webpack 2 does?
好吧，我是一名学习编码的设计师，所以请原谅我的无知。
我正在尝试使用本教程学习 webpack：https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
教程的 repo 在这里：https://github.com/joezimjs/Webpack-Introduction-Tutorial
我所做的回购在这里：https://github.com/thedonquixotic/webpack-practice
在学习本教程的过程中，我遇到了一些问题，我认为主要是由于 webpack 的变化。我目前正在使用示例 5（存储库在流程中的每个步骤都有分支）。
我对此进行了大量故障排除，我想我终于找到了原因！
当我键入 npm run 时，服务器已启动，但未创建 dist 文件夹，当我访问该页面时服务器抛出 http 方法错误并且找不到模板。
我仔细检查了所有内容，发现两者之间的关键区别在于教程回购加载 webpack 2，而我的回购加载 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 配置文件中，它就无法 resolve.path：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
我在 webpack.config.js 中使用 CleanWebpackPlugin (clean-webpack-plugin) 来创建该文件夹：
plugins: [
new CleanWebpackPlugin(["dist"])
]
它删除并重新创建它。
我想通了!!!!
好的，这就是交易。我搜索了错误输出“$export is not a function”，似乎我唯一需要做的就是将 exclude /node_modules/ 添加到我的 babel 加载器中！哇！终于！！！
总的来说，我必须做的改变是让它支持 webpack 4，在 webpack.config.js 文件中创建 const 'path'，使用 resolve.path 目录名，然后确保排除节点模块并且它有效！！！
好吧，我是一名学习编码的设计师，所以请原谅我的无知。
我正在尝试使用本教程学习 webpack：https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
教程的 repo 在这里：https://github.com/joezimjs/Webpack-Introduction-Tutorial
我所做的回购在这里：https://github.com/thedonquixotic/webpack-practice
在学习本教程的过程中，我遇到了一些问题，我认为主要是由于 webpack 的变化。我目前正在使用示例 5（存储库在流程中的每个步骤都有分支）。
我对此进行了大量故障排除，我想我终于找到了原因！
当我键入 npm run 时，服务器已启动，但未创建 dist 文件夹，当我访问该页面时服务器抛出 http 方法错误并且找不到模板。
我仔细检查了所有内容，发现两者之间的关键区别在于教程回购加载 webpack 2，而我的回购加载 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 配置文件中，它就无法 resolve.path：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
我在 webpack.config.js 中使用 CleanWebpackPlugin (clean-webpack-plugin) 来创建该文件夹：
plugins: [
new CleanWebpackPlugin(["dist"])
]
它删除并重新创建它。
我想通了!!!!
好的，这就是交易。我搜索了错误输出“$export is not a function”，似乎我唯一需要做的就是将 exclude /node_modules/ 添加到我的 babel 加载器中！哇！终于！！！
总的来说，我必须做的改变是让它支持 webpack 4，在 webpack.config.js 文件中创建 const 'path'，使用 resolve.path 目录名，然后确保排除节点模块并且它有效！！！