Question

我正在尝试学习Webpack但是当我尝试执行最简单的webpack命令时我遇到了错误，因此非常令人沮丧。这是我的错误：

PS D:\Projets\#Bazar\WebPackTry> webpack src/js/main.js dist/bundle.js
Hash: 67b5c95f9d0dfcab805d
Version: webpack 4.0.0
Time: 227ms
Built at: 2018-2-25 12:41:17
  1 asset
Entrypoint main = main.js
[0] ./src/js/main.js + 1 modules 83 bytes {0} [built]
    | ./src/js/main.js 32 bytes [built]
    | ./src/js/log.js 51 bytes [built]
[1] multi ./src/js/main.js dist/bundle.js 40 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in multi ./src/js/main.js dist/bundle.js
Module not found: Error: Can't resolve 'dist/bundle.js' in ' 
D:\Projets\#Bazar\WebPackTry'
@ multi ./src/js/main.js dist/bundle.js

所以你可以看到我发了这个命令：webpack src/js/main.js dist/buundle.js和webpack把这个错误扔给我。

我尝试使用绝对路径，我认为使用#Bazar的路径名称将成为问题。但即使改变它们，我也会遇到同样的错误。

我成功的唯一方法就是当我创造了一个dist / bundle.js

但即使这些webpack在我的dist文件夹中创建了另一个文件，也可以调用main.js

我尝试了多个教程，但我没有找到有关此错误的任何信息。

这也是我的项目架构

WebpackTry
|-node_modules
|-dist
|-src
|  |-css
|  |-js
|     |log.js
|     |main.js
|index.html
|package-lock.json
|package.json

PS：对不起我的英文：/

PS2：我无法发布图片，所以我复制/粘贴了我的错误

Answer 1

以下是来自webpack的帮助消息：在 webpack 4

中输入 webpack --help

Usage without config file: webpack <entry> [<entry>] --output [-o] <output>

注意： - 输出需要明确指定

<强>解决方案：

webpack src/js/main.js --output dist/bundle.js --mode development

添加 - 输出并指定模式选项即可。

Answer 2

我建议您通读official documentation，并在根目录中设置webpack.config.js文件。此外，将所有源文件移动到src /（包括index.html）。

以下是一个示例webpack.config.js文件，可根据您当前的项目结构进行自定义。

const path = require('path');

module.exports = {
  entry: './src/js/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

Webpack：找不到多模块中的错误

2 个答案: