语言►nodejs►库►webpack

webpack配置中的output属性

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/03/webpack%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84output%E5%B1%9E%E6%80%A7/

摘要

本文主要讲述了：

  1. 作用
  2. 配置

正文

作用

配置webpack的输出。

配置

filename

打包后的文件名称。

示例：

1
2
3
4
5
module.exports = {
  output: {
    filename: 'bundle.js',
  },
};

注意：虽然filename表示文件名，但实际也可包含目录名。如果对应目录不存在，webpack会自行创建

示例：

1
2
3
4
5
6
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js',
  },
};

当多入口时，可以使用占位符配置文件名称。

示例：

1
2
3
4
5
module.exports = {
  output: {
    filename: '[name].bundle.js',
  },
};

占位符：

  • [name] 代码块的名称
  • [chunkhash] 代码块的哈希

chunkFilename

非入口文件的代码块（例如：按需加载的代码块）名称。

path

构建目录的绝对路径

示例：

1
2
3
4
5
6
7
const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
};

publicPath

构建目录的公共 URL 前缀。

示例：

1
2
3
4
5
6
7
const path = require('path');

module.exports = {
  output: {
    publicPath: '//example.com',
  },
};

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/03/webpack%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84output%E5%B1%9E%E6%80%A7/

本文对你有帮助？请支持我

支付宝
微信