# d7c-webpack **Repository Path**: d7c/d7c-webpack ## Basic Information - **Project Name**: d7c-webpack - **Description**: d7c-webpack 是一个使用 npm 和 bower 进行包管理，webpack 进行自动化构建的快速 WEB 骨架项目。 - **Primary Language**: NodeJS - **License**: AGPL-3.0 - **Default Branch**: master - **Homepage**: http://www.d7c.top/ - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-06-24 - **Last Updated**: 2022-11-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # d7c-webpack ## 介绍 d7c-webpack 是一个使用 npm 进行包管理，webpack 进行自动化构建的快速 WEB 骨架项目。 ## 软件架构 ### 应用程序依赖包管理工具 npm npm 官网地址：[https://www.npmjs.com](https://www.npmjs.com/)，npm 全称 Node Package Manager 是 node 应用程序依赖包的管理工具，包括安装、卸载、更新模块操作，使用 nodejs 16.15.1 开发时一般使用 npm 来管理 nodejs 中的包。 ### 自动化构建工具 webpack webpack 官网地址：[https://www.webpackjs.com/](https://www.webpackjs.com/)，中文官网地址：[https://webpack.docschina.org/](https://webpack.docschina.org/)，webpack 是一个现代 JavaScript 应用程序的模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 ## 安装教程 ### 1. 在码云上创建 d7c-webpack 仓库并克隆到本地 ### 2. 初始化（给项目添加依赖配置文件） ``` 在项目根目录下打开命令行窗口，输入 npm init <--yes> ``` ### 3. 新建 .editorconfig，规范文本编码格式 ### 4. 安装其他开发依赖模块 ``` 1、webpack 客户端 npm install --save-dev webpack webpack-cli 2、能够实时重新加载的 web 服务器 npm install --save-dev webpack-dev-server 3、style-loader 会在 html 中创建 style 标签，css-loader 会将 CSS 文件整合到 JS 文件中 npm install --save-dev style-loader css-loader 4、用 JavaScript 工具和插件转换 CSS 代码的工具，通过配置加载指定 CSS 兼容性样式 npm install --save-dev postcss postcss-preset-env postcss-loader 5、提取 JS 中 CSS 为一个单独的文件 npm install --save-dev mini-css-extract-plugin 6、CSS 压缩、缓存 npm install --save-dev css-minimizer-webpack-plugin 7、less 加载 npm install --save-dev less less-loader 8、sass 加载 npm install --save-dev sass sass-loader 9、JS 语法检查 npm install --save-dev eslint eslint-webpack-plugin eslint-config-airbnb-base eslint-plugin-import eslint-plugin-html 10、JS 兼容性处理 https://www.babeljs.cn/docs/usage npm install --save-dev @babel/core @babel/cli @babel/preset-env babel-loader @babel/plugin-transform-runtime babel-plugin-transform-remove-console 11、压缩 JavaScript npm install --save-dev terser-webpack-plugin 12、加载 html 模块插件 npm install --save-dev html-webpack-plugin 13、处理 html 文件中的资源路径 npm install --save-dev html-loader html-withimg-loader 14、优化图片 npm install --save-dev image-minimizer-webpack-plugin imagemin 15、无损优化 imagemin 插件 npm install --save-dev imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo 16、csv、xml 文件加载 npm install --save-dev csv-loader xml-loader 17、让指定 loader 在线程池中处理 npm install --save-dev thread-loader 18、抽取 webpack 公共配置 npm install --save-dev webpack-merge 19、运行跨平台设置和使用环境变量的脚本 npm install --save-dev cross-env 20、构建分析 npm install --save-dev speed-measure-webpack-plugin webpack-bundle-analyzer ``` ### 5. 安装项目依赖模块 ``` 1、JavaScript 标准库的补丁，与 babel 共同解决 JS 浏览器兼容性问题 npm install --save core-js 2、bootstrap npm install --save bootstrap@3.4.1 npm install --save jquery npm install --save html5shiv npm install --save respond.js ``` ### 6. 创建 .eslintrc.js、.eslintignore 和 babel.config.js 文件，编写 eslint 规则和 babel 规则 ### 7. 创建并编写 webpack 配置文件 ``` /build/webpack.*.js ``` ### 8. 运行测试 ``` cd d7c-webpack npm run dev ``` ## 使用说明 ### 1. 克隆并安装项目，在项目根目录下执行 ``` npm install ``` ### 2. 其他命令 ``` Compiles and hot-reloads for debugger：npm run debug Compiles and hot-reloads for development：npm run serve / npm run start / npm run dev Compiles and minifies for production：npm run build Lints and fixes files：npm run lint ``` ## 运行展示 ## 经验 在安装无损优化 imagemin 插件时由于 raw.githubusercontent.com 无法 ping 通导致安装失败： 如果使用 cnpm 安装，那么后面安装其他插件都需要使用 cnpm 命令，如果使用 npm 安装会报错，而且 cnpm 不会维护 package-lock.json 信息。 我们可以在 host 文件中配置如下映射（这些映射可能会变）： ``` 185.199.108.133 raw.githubusercontent.com 185.199.109.133 raw.githubusercontent.com 185.199.110.133 raw.githubusercontent.com 185.199.111.133 raw.githubusercontent.com 151.101.76.133 raw.githubusercontent.com 151.101.76.133 gist.githubusercontent.com 151.101.76.133 cloud.githubusercontent.com 151.101.76.133 camo.githubusercontent.com 151.101.76.133 avatars0.githubusercontent.com 151.101.76.133 avatars1.githubusercontent.com 151.101.76.133 avatars2.githubusercontent.com 151.101.76.133 avatars3.githubusercontent.com 151.101.76.133 avatars4.githubusercontent.com 151.101.76.133 avatars5.githubusercontent.com 151.101.76.133 avatars6.githubusercontent.com 151.101.76.133 avatars7.githubusercontent.com 151.101.76.133 avatars8.githubusercontent.comsssss ``` 再 ping 就可以 ping 通了： 当然，如果你不介意没有 package-lock.json 文件，你完全可以使用 cnpm。 ## 捐助打赏 如果您觉得我们的开源软件对你有所帮助，请扫下方二维码打赏我们一杯咖啡。 ![微信收款码](https://images.gitee.com/uploads/images/2021/0222/174352_b22739f5_1070311.jpeg "微信收款码.jpg") ![微信赞赏码](https://images.gitee.com/uploads/images/2021/0222/174521_67e18b39_1070311.jpeg "微信赞赏码.jpg") ![支付宝收款码](https://images.gitee.com/uploads/images/2021/0222/174540_94a9ac41_1070311.jpeg "支付宝收款码.jpg") ## 参与贡献 1. Fork 本仓库 2. 新建 d7c-webpack_xxx 分支 3. 提交代码 4. 新建 Pull Request ## 特技 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) 6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)