# webpack-case

**Repository Path**: xueBingChuan/webpack-case

## Basic Information

- **Project Name**: webpack-case
- **Description**: 基于webpack搭建的调试性功能框架，目前有基于vue，react技术栈进行项目框架的搭建,详细内容请参看说明文档！
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 142
- **Forks**: 22
- **Created**: 2023-01-29
- **Last Updated**: 2024-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
  <a href="https://gridea.dev">
    <img src="https://gitee.com/xueBingChuan/nodejs-webserve/raw/master/src/static/face.jpg"  width="80px" height="80px">
  </a>
  <h1 align="center">
     webpack-case
  </h1>
  <h3 align="center">
    本项目致力于实现搭建更加稳定健壮,高性能的前端框架
  </h3>
</div>


## 插件说明
*  master分支的代码为基础版本,基于webpack实现基础配置
*  dev_vue分支的代码为基于master基础版之上进行的关于vue的框架配置
*  dev_react分支的代码为基于master基础版之上进行的关于react的框架配置
*  其他分支待扩展....



#  使用说明
安装：
```
npm install
```

运行
```
npm run dev
```

打包内测版本:
```
npm run build-demo
```

打包部署版本:
```
npm run build-demo
```
> 注意⚠️：比较复杂的项目中，angular2编译的时候对CPU和内存需求都会变大。需要内存2-3G。node本身，或者说v8本身有一个默认配置:Currently, by default v8 has a memory limit of 512mb on 32-bit systems, and 1gb on 64-bit systems. The limit can be raised by setting --max-old-space-size to a maximum of ~1gb (32-bit) and ~1.7gb (64-bit), but it is recommended that you split your single process into several workers if you are hitting memory limits.所以我们需要配置一下运行内存。修改ng.cmd,追加–max_old_space_size=4096 避免aot时内存溢出


[comment]: <> (## Loader&#40;基础说明&#41;)

[comment]: <> (postcss-loader：一般用于添加兼容性属性前缀；)

[comment]: <> (url-loader：用于将图片,视频等小于一定大小的文件，转为 base64 字符串；)

[comment]: <> (file-loader：url-loader 不能转换 base64字符串 的文件，被这个处理（主要用于设置打包后图片路径，以及CDN等；)

[comment]: <> (html-withimg-loader：用于加载html模板；)

[comment]: <> (babel-loader：用于将es6、es7等语法，转换为es5语法；)

[comment]: <> (css-loader：用于处理css文件（主要是处理图片的url；)

[comment]: <> (style-loader：将转换后的css文件以 style 标签形式插入 html 中；)

[comment]: <> (less-loader：以 less 语法来写 css；)

[comment]: <> (sass-loader：以 Ruby 语法来写 css；)

[comment]: <> (node-sass：是一个库，它将Node.js绑定到LibSass,并通过连接中间件自动将.scss文件转为.css文件；)

## 优化性方案:
1.使用Devtool配置实现构建后的代码快速定位调试

2.设置小于1m的图片转为Base64编码存储,减少服务请求压力

3.采用babel-loader和进行多进程打包,优化打包速度

4.采用oneOf优化loader的重复解析调用

5.文件名添加contentHash值缓存文件,提高命中效率

6.将jq,vue,vuex,element采用cdn外部引入,减少项目体积及优化响应速度

7.使用Lighthouse行项目性能瓶颈筛查优化

8.使用jest构建多个测试单元,强化代码健壮性

9.弃用了optimize.OccurenceOrderPlugin，NoErrorsPlugin

[comment]: <> (#  注:)

[comment]: <> (webpack 从 4.0 版本开始，在安装时，就必须要安装webpack 和 webpack-cli 这2个东西。)

[comment]: <> (webpack 是打包代码时依赖的核心内容，而 webpack-cli 是一个用来在命令行中运行 webpack 的工具。)

# 补充

`webpack`,`babel`,`jest`等 不懂的可以看看我之前发的文章(相关代码相比现在有部分改动)：http://bing-chuan.work/blog