为啥 Webpack 4 不创建 dist 文件夹，而 webpack 2 却创建？
Posted
技术标签:
【中文标题】为啥 Webpack 4 不创建 dist 文件夹，而 webpack 2 却创建？【英文标题】：Why does Webpack 4 not create dist folder but webpack 2 does?为什么 Webpack 4 不创建 dist 文件夹，而 webpack 2 却创建？ 【发布时间】：2018-11-30 00:18:41 【问题描述】：好的，我是一名学习编码的设计师，所以请原谅我的无知。
我正在尝试使用本教程学习 webpack：https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
教程的仓库在这里：https://github.com/joezimjs/Webpack-Introduction-Tutorial
我所做的事情的回购在这里：https://github.com/thedonquixotic/webpack-practice
随着教程的进行，我遇到了一些问题，我认为主要是由于 webpack 的变化。我目前在示例 5 中（repo 对流程中的每个步骤都有分支）。
我已经对此进行了大量的故障排除，我想我终于找到了原因！
当我输入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 配置文件中，它就无法 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
【问题讨论】：
检查更新后的错误：***.com/q/36313885/426422 【参考方案1】：我在 webpack.config.js 中使用 CleanWebpackPlugin (clean-webpack-plugin) 来创建该文件夹：
plugins: [
new CleanWebpackPlugin(["dist"])
]
它删除并重新创建它。
【讨论】：
这是伟大的迈克，但你认为你能解释为什么其他方式不起作用吗？我正在努力确保我完全了解我正在使用的新管道。 我几乎没有使用过 Webpack 2，主要是三个，从 3 到 4 的转变对我来说并不算太激烈。我在它刚推出时就切换到它（尽管由于插件架构的变化而出现了一些问题）。【参考方案2】：我明白了！！！！
好的，这就是交易。我搜索了错误输出“$export is not a function”，看来我唯一需要做的就是将 exclude /node_modules/ 添加到我的 babel 加载器！哇！终于！！！！
总的来说，我必须做的更改是让它支持 webpack 4，在 webpack.config.js 文件中创建 const 'path'，使用 resolve.path 目录名，然后确保排除节点模块和它工作！！！
【讨论】：
以上是关于为啥 Webpack 4 不创建 dist 文件夹，而 webpack 2 却创建？的主要内容，如果未能解决你的问题，请参考以下文章