%20(2).svg)
项目简介
本项目围绕Webpack构建，是一个用于搭建开发模式和生产模式的工具。Webpack作为强大的模块化管理和打包工具，能对模块进行压缩、预处理、按需打包与加载。本项目利用Webpack的特性，针对开发和生产两种不同场景进行了针对性配置。
项目的主要特性和功能
- 多模块支持：支持CommonJs、AMD、ES6等多种模块方案，能自动管理依赖关系。
- 双模式配置：提供开发模式和生产模式的不同配置。开发模式加快编译速度，支持热更新和源码调试；生产模式可压缩代码、拆分公共代码段和第三方库。
- 代码处理丰富：可处理png、csv、xml、css、json等非JavaScript文件，对图片、字体等资源进行优化处理。
- 性能优化：提供多种优化机制减少打包输出文件大小，使用hash机制解决浏览器缓存问题。
- 插件化设计：支持丰富的插件，可执行打包、优化、压缩、搭建服务器等任务。
安装使用步骤
安装依赖
在项目根目录下，打开终端执行以下命令安装所需依赖：
bash
npm i webpack webpack-cli webpack-dev-server --save-dev
npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev
npm i @babel/polyfill @babel/runtime
npm i html-webpack-plugin html-loader clean-webpack-plugin --save-dev
npm i css-loader style-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin --save-dev
npm i node-sass sass-loader --save-dev
npm install postcss-loader autoprefixer --save-dev
npm i url-loader file-loader image-webpack-loader --save-dev
npm i jquery
npm i webpack-merge --save-dev
开发模式启动
在package.json的scripts中添加了dev命令，执行以下命令启动开发服务器：
bash
npm run dev
此时会自动打开浏览器，支持热更新和源码调试。
生产模式构建
在package.json的scripts中添加了build命令，执行以下命令进行生产环境的代码打包：
bash
npm run build
打包后的文件会输出到dist目录，包含压缩和拆分后的代码。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】