%20(2).svg)
项目简介
本项目是基于 webpack 的前端项目构建方案，主要解决前端项目开发和打包时的多入口配置、资源自动引入、输出目录清理、错误定位、实时重新加载以及打包文件分析等问题，以提升开发效率和项目可维护性。
项目的主要特性和功能
- 多入口配置：支持多入口文件配置，把
entry改为 object 类型，用占位符[name]动态生成输出文件名。 - 自动引入资源：利用
HtmlWebpackPlugin自动生成 HTML 文件，并自动引入打包的 JS、图片、CSS 等资源。 - 清理输出目录：依据 webpack 版本不同，采用不同方法清理
./dist文件夹，webpack@5.20.0 及以后版本用output.clean，之前版本用clean-webpack-plugin。 - 错误定位：借助
source map功能，将编译后的代码映射回原始源代码，便于准确追踪错误和警告的原始位置。 - 实时重新加载：通过
webpack-dev-server提供基本的 web server，实现实时重新加载，修改文件后自动打包构建。 - 打包文件分析：使用
webpack-bundle-analyzer查看打包文件大小，分析文件组成，助力优化项目性能。
安装使用步骤
安装依赖
下载项目源码文件后，打开终端，进入项目根目录，执行以下命令安装依赖：
bash
npm i html-webpack-plugin -S
npm i clean-webpack-plugin -D
npm i webpack-dev-server -S
npm i webpack-bundle-analyzer -S
配置 webpack
在 webpack.config.js 中进行相关配置，示例如下：
```javascript
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const WebapckBundleAnalyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const config = { entry: { main: "./index.js", print: "./print.js" }, output: { filename: "[name].min.js", path: path.resolve(__dirname, "dist"), clean: true // webpack@5.20.0 及以后版本 }, devtool: "inline-source-map", devServer: { static: "./dist" }, mode: "development", plugins: [ new HtmlWebpackPlugin({ title: "hello webpack" }), new CleanWebpackPlugin(), new WebapckBundleAnalyzer() ] };
module.exports = config; ```
添加运行脚本
在 package.json 中添加运行脚本：
json
{
"scripts": {
"serve": "webpack serve --open",
"build": "webpack"
}
}
运行项目
- 开发模式：在终端执行
npm run serve，启动webpack-dev-server，项目会在浏览器中自动打开，修改文件后自动重新打包构建。 - 生产模式：执行
npm run build进行项目打包，打包后的文件会输出到./dist目录。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】