webpack打包配置(__dirname, extensions, alias)

最新推荐文章于 2024-05-15 11:45:46 发布

原创最新推荐文章于 2024-05-15 11:45:46 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js #webpack

前端学习记录专栏收录该内容

5 篇文章

订阅专栏

本文介绍了webpack中使用__dirname的含义，解释了path.resolve如何创建打包后的build目录，以及如何通过配置filename指定输出文件名。此外，还详细讲解了resolve.extensions简化文件导入和alias设置别名来便捷引用路径的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

"__dirname"是node中的一个全局变量，它指向当前执行脚本所在的目录。
"path.resolve"相当于在当前文件夹后面拼接了一个文件路径，也就是打包时，会在当前项目中生成一个名为build的文件目录，用来存放打包内容。
“filename"为打包后的文件名称。
配置resolve中的extensions，可以忽略文件引入后缀
配置resolve中的alias，可以使用简单字符代替文件引入的相对路径”…/"之类

// 封装函数使用resolve更方便
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
module.exports = {
    mode: 'development',	// 开发模式 
    entry: './src/main.js',	// 入口文件
    output: {
        filename: 'bundle.js',	// 打包后的文件名
        path: path.resolve(__dirname, 'build')	// 打包文件目录
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],	// 引入文件时可忽略后缀
        alias: {
          '@': resolve('src'),	// 引入文件时使用'@'代替'src'目录，使用resolve时封装一个方法，或者使用path.resolve
        }
    },
}