nodemon-webpack-plugin 项目教程

1. 项目目录结构及介绍

nodemon-webpack-plugin/
├── src/
│   ├── index.js
│   └── utils/
│       └── helper.js
├── dist/
│   └── bundle.js
├── webpack.config.js
├── package.json
├── README.md
└── .gitignore

目录结构说明

• src/: 存放项目的源代码文件。
  • index.js: 项目的入口文件。
  • utils/: 存放工具函数或辅助代码。
    • helper.js: 工具函数文件。
• dist/: 存放编译后的输出文件。
  • bundle.js: Webpack 编译后的输出文件。
• webpack.config.js: Webpack 配置文件。
• package.json: 项目的依赖管理文件。
• README.md: 项目的说明文档。
• .gitignore: Git 忽略文件配置。

2. 项目的启动文件介绍

入口文件：src/index.js

// src/index.js
import { helper } from './utils/helper';

console.log('项目启动成功！');
helper();

工具函数文件：src/utils/helper.js

// src/utils/helper.js
export function helper() {
  console.log('这是一个工具函数');
}

启动命令

在 package.json 中定义了启动命令：

{
  "scripts": {
    "start": "webpack --watch"
  }
}

运行 npm start 命令即可启动项目。

3. 项目的配置文件介绍

Webpack 配置文件：webpack.config.js

// webpack.config.js
const path = require('path');
const NodemonPlugin = require('nodemon-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new NodemonPlugin()
  ]
};

配置文件说明

• entry: 指定项目的入口文件为 src/index.js。
• output: 指定输出文件为 dist/bundle.js。
• plugins: 使用 NodemonPlugin 插件，在 Webpack 编译完成后自动重启 Node.js 服务器。

通过以上配置，项目可以在开发过程中自动编译并重启服务器，提高开发效率。