webpack-assets-manifest 使用教程

webpack-assets-manifest 使用教程

1. 项目的目录结构及介绍

webpack-assets-manifest/
├── src/
│   ├── index.js
│   └── utils.js
├── dist/
│   ├── main.js
│   └── asset-manifest.json
├── webpack.config.js
├── package.json
└── README.md

• src/: 源代码目录，包含项目的入口文件和其他模块。
• dist/: 构建输出目录，包含编译后的文件和资源清单文件。
• webpack.config.js: Webpack 配置文件，定义了项目的构建规则和插件。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件位于 src/index.js，这是 Webpack 构建的入口点。以下是 src/index.js 的示例内容：

import { greet } from './utils';

greet('World');

• import { greet } from './utils';: 导入 utils.js 模块中的 greet 函数。
• greet('World');: 调用 greet 函数并传入参数 'World'。

3. 项目的配置文件介绍

项目的配置文件是 webpack.config.js，它定义了 Webpack 的构建规则和插件。以下是 webpack.config.js 的示例内容：

const WebpackAssetsManifest = require('webpack-assets-manifest');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'main.js'
  },
  plugins: [
    new WebpackAssetsManifest({
      output: 'asset-manifest.json'
    })
  ]
};

• entry: './src/index.js': 指定项目的入口文件。
• output: { path: __dirname + '/dist', filename: 'main.js' }: 指定输出目录和文件名。
• plugins: [ new WebpackAssetsManifest({ output: 'asset-manifest.json' }) ]: 使用 webpack-assets-manifest 插件生成资源清单文件。

通过以上配置，Webpack 会根据入口文件构建项目，并生成资源清单文件 asset-manifest.json，其中包含了所有生成的资源文件的路径映射。