解决：webpack 编译成功了，没有生成的文件

问题

webpack 编译成功，没有任何的报错或警告，就是没有生成的文件。

这是我开始的配置

const path = require("path");

module.exports = {
    entry: './src/js/main.js',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    mode: "development",
    output: {
        path: path.resolve(__dirname, '/dist'),
        filename: "bundle.js",
    },
};

解决方案

将path改为path.resolve(__dirname, 'dist')即可。

原因

path.resolve() 方法会将传入的路径解析为绝对路径，因此，如果在调用 path.resolve() 时传递了斜杠（/），则生成的路径将包含根目录。即变成了/dist，webpack找不到这个文件夹。

1、不带参数时
path.resolve() 返回的是当前的文件的绝对路径/Users/xxxx/
2、带不是/开头的参数
path.resolve('a') 返回的是当前绝对路径拼接现在的参数/Users/xxxx/a
path.resolve('a'，'b') 返回的是当前绝对路径拼接现在的参数/Users/xxxx/a/b
3、带./开头的参数
path.resolve('./a') 返回的是当前绝对路径拼接现在的参数/Users/xxxx/a
path.resolve('./a','./b') 返回的是当前绝对路径拼接现在的参数/Users/xxxx/a/b
4、带/开头的参数 返回的是 /+‘最后一个前面加/的文件文件名’+‘剩下文件夹
path.resolve('/a') 返回的是当前绝对路径拼接现在的参数/a
path.resolve('/a'，'/b') 返回的是当前绝对路径拼接现在的参数/b
path.resolve('/a'，'/b', 'c') 返回的是当前绝对路径拼接现在的参数/b/c

其他
Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径。

参考链接

https://www.jianshu.com/p/3a713442b70b