path.resolve()的使用技巧

path.resolve()的使用技巧

使用webpack不可避免的用到node的path模块，例如我们在webpack.config.js中做了如下配置：

const path = require('path')
module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname,'./dist')
    }
};

不禁会想，这个path.resolve帮我们做了什么呢？让我们看一下path.resolve的文档（from 菜鸟教程）

path.resolve([from …], to)

将 to 参数解析为绝对路径，给定的路径的序列是从右往左被处理的，后面每个 path 被依次解析，直到构造完成一个绝对路径。 例如，给定的路径片段的序列为：/foo、/bar、baz，则调用 path.resolve(’/foo’, ‘/bar’, ‘baz’) 会返回 /bar/baz。

path.resolve('/foo/bar', './baz');
// 返回: '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');
// 返回: '/tmp/file'

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// 如果当前工作目录为 /home/myself/node，
// 则返回 '/home/myself/node/wwwroot/static_files/gif/image.gif'

文档说的很明白，一句话概括就是path.resolve返回一个以/开头的绝对路径，另外当参数只有一个相对路径（不是以/开头的路径）时，path.resolve会帮我们拼接成绝对路径，那么我们在webpack的配置中就可以简写：

const path = require('path')

// 下面两行代码效果相同
console.log(path.resolve('./dist')) 
console.log(path.resolve(__dirname,'./dist'))

// 在webpack.config.js中
const path = require('path')
module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: "bundle.js",
        path: path.resolve('./dist')  //此处可简写。
    }
};