Webpack 如何配置编译后文件的输出目录-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是前端开发中使用较广的模块打包工具，它可以将各种资源如 js、css、图片、字体等打包到一起，使得前端开发工作更加便捷。在使用 Webpack 进行打包时，我们可以通过配置 Webpack，指定编译后文件的输出目录。

Webpack 输出目录的默认配置

Webpack 的默认输出目录是 dist，可以通过 output.path 进行配置。默认情况下，Webpack 根据 entry 配置的入口文件生成一个或多个输出文件。如果未配置 output.filename 参数，Webpack 会使用默认的文件名 [name].js，其中 name 代表入口文件的名称。

以下是默认输出目录的示例配置：

// javascriptcn.com 代码示例
module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js'
  }
};

这个配置文件将 ./src/index.js 文件作为入口文件，打包后的输出文件为 ./dist/main.js。

更改 Webpack 的输出目录

如果你想将 Webpack 打包后的文件输出到其他目录，那么可以通过设置 output.path 参数进行配置。例如，将输出目录设置为 ./build：

// javascriptcn.com 代码示例
module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  output: {
    path: __dirname + '/build',
    filename: '[name].js'
  }
};

这个配置文件将 ./src/index.js 文件作为入口文件，打包后的输出文件为 ./build/main.js。

输出文件命名规则

Webpack 会根据 output.filename 参数配置输出文件的命名规则。默认情况下，输出文件名为 [name].js，其中 name 代表入口文件的名称。除了 name，还可以使用其他变量来命名输出文件。

以下是常用的输出文件命名变量：

[name]：入口文件的名称。
[hash]：打包后文件的唯一标识符。
[chunkhash]：模块的唯一标识符。
[id]：模块的 id。
[query]：模块的查询字符串。

例如，以下配置文件的输出文件名为 bundle.[hash].js：

// javascriptcn.com 代码示例
module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.[hash].js'
  }
};

这个配置文件将 ./src/index.js 文件作为入口文件，打包后的输出文件为 ./dist/bundle.xxxxxxxxxxxxxx.js，其中的 xxxxxxxxxxxxxxxx 是打包后文件的唯一标识符。

总结

通过本文的介绍，我们了解了如何配置 Webpack 的输出目录和输出文件名称。这些配置项可以使开发者更灵活地管理打包后的文件，适应不同的项目需求。在实际开发中，我们可以根据具体需求选择不同的配置方式，提高开发效率和质量。

参考链接

Webpack Output

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652fb1dd7d4982a6eb0e11f8