问题
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
文件的绝对路径。