我正在尝试学习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:我无法发布图片,所以我复制/粘贴了我的错误
答案 0 :(得分:3)
以下是来自webpack的帮助消息:在 webpack 4
中输入 webpack --helpUsage without config file: webpack <entry> [<entry>] --output [-o] <output>
注意: - 输出需要明确指定
<强>解决方案:强>
webpack src/js/main.js --output dist/bundle.js --mode development
添加 - 输出并指定模式选项即可。
答案 1 :(得分: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'
}
};