Question

好的，我是一位学习编程的设计师，所以请您原谅我的无知。

我正在尝试使用以下教程来学习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上（仓库中的每个步骤都有分支）。

我对此做了很多故障排除，我想我终于找到了原因！

当我键入npm run时，服务器已启动，但未创建dist文件夹，并且当我访问页面时服务器抛出http方法错误，并且找不到模板。

我已经仔细检查并仔细检查了所有内容，发现两者之间的关键区别是教程存储库加载了webpack 2，我的存储库加载了webpack4。当我加载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的问题是如果不将它添加到顶部的const path = require('path');

的webpack配置文件中，它就无法解决.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"])
]

它将删除并重新创建它。

Answer 2

我想通了！!!!

好的，这是交易。我搜索了错误输出“ $ export不是一个函数”，看来我唯一需要做的就是在我的babel加载器中添加exclude / node_modules /！！终于！！！

总的来说，我要做的更改是使其支持webpack 4，在webpack.config.js文件中创建const'path'，使用resolve.path dirname，然后确保排除节点模块及其作品！！！

为什么Webpack 4不能创建dist文件夹，而Webpack 2可以呢？

编辑：

2 个答案: