webpack5中 output assetModuleFilename属性有什么用

在 Webpack 5 中，'assetModuleFilename' 属性用于配置生成的资源文件（如图片、字体等）在输出目录中的文件名格式。默认情况下，Webpack 5 会将这些资源文件输出到 'output.path' 目录下，并根据文件类型以不同的文件名格式进行命名，例如：'[name][ext]'、'[name].[contenthash][ext]' 等。

通过配置 'assetModuleFilename' 属性，你可以自定义资源文件的输出文件名格式。该属性支持以下几种变量：

- '[hash]'：资源内容的哈希值
- '[contenthash]'：资源内容的哈希值，只有在资源内容发生变化时才会改变
- '[name]'：资源的名称
- '[ext]'：资源的后缀名

例如，可以通过以下配置将所有图片资源的文件名格式设置为 'images/[name].[contenthash][ext]'：

module.exports = {
  //...
  output: {
    assetModuleFilename: 'images/[name].[contenthash][ext]'
  }
};

这样，所有图片资源都将被输出到 'output.path/images' 目录下，并且文件名以资源名称和内容哈希值为文件名，以资源后缀名为文件后缀名。

相关问题

webpack3和webpack5有什么不同

webpack5 相对于 webpack3 来说，有以下几个主要不同点：

1. `webpack5` 对 `tree shaking` 优化更好，能够更好地剔除无用的代码模块；
2. `webpack5` 默认使用 `top-level await` 特性，能够更好地处理异步模块加载；
3. `webpack5` 内置了 `module federation` 特性，能够更好地支持多个独立的构建产物之间的模块共享；
4. `webpack5` 提供了一些新的内置插件和特性，如 `Persistent Caching` 等。

webpack中package中的属性分别代表什么，举例说明20个

在 webpack 中，package.json 中的属性有很多，下面列举一些比较常见的属性及其含义和举例说明：

1. name：项目名称，例如 "name": "my-webpack-project"。

2. version：项目版本号，例如 "version": "1.0.0"。

3. description：项目描述，例如 "description": "A simple webpack project"。

4. author：项目作者，例如 "author": "John Doe <johndoe@example.com>"。

5. license：项目许可证，例如 "license": "MIT"。

6. main：入口文件，例如 "main": "src/index.js"。

7. scripts：命令脚本，例如 "scripts": {"start": "webpack-dev-server --open", "build": "webpack"}。

8. dependencies：项目依赖，例如 "dependencies": {"react": "^16.8.6", "react-dom": "^16.8.6"}。

9. devDependencies：开发依赖，例如 "devDependencies": {"webpack": "^4.35.3", "webpack-cli": "^3.3.5"}。

10. peerDependencies：对等依赖，例如 "peerDependencies": {"react": "^16.8.6", "react-dom": "^16.8.6"}。

11. engines：所需的 Node.js 版本范围，例如 "engines": {"node": ">=8.0.0"}。

12. private：表示这个包是私有的，不会被发布到公共仓库，例如 "private": true。

13. repository：代码仓库地址，例如 "repository": {"type": "git", "url": "https://github.com/username/my-webpack-project.git"}。

14. bugs：缺陷报告地址，例如 "bugs": {"url": "https://github.com/username/my-webpack-project/issues"}。

15. homepage：项目主页，例如 "homepage": "https://github.com/username/my-webpack-project#readme"。

16. keywords：项目关键词，例如 "keywords": ["webpack", "react", "babel"]。

17. enginesStrict：是否严格要求 Node.js 版本，例如 "enginesStrict": true。

18. bin：命令行工具入口，例如 "bin": {"mytool": "./bin/mytool.js"}。

19. files：项目发布的文件列表，例如 "files": ["dist", "src"]。

20. publishConfig：发布配置，例如 "publishConfig": {"registry": "https://registry.npmjs.org/"}。