开源一个用于国内股权交易所的webpack配置

由于工作原因，公司很多客户的项目股权交易所，而大部分针对用户端的web都是基于webpack来构建的。

为什么要开源webpack配置，不担心版权问题吗？

首先的说明，webpack本身即开源，而我公开的只是基于webpack的配置而已，不存在版权问题。那为什么又要放出来呢？这些本身都是网上到处都是，有什么意义？

这个问题比较好，正因为是网上很多，但是大部分漏洞百出，不是版本未给明，就是可能摘抄并没有经过测试。

而我公开的配置是目前国内部分股权交易所正在使用的，不的不说是前端开发人员的福利。

这个webpack配置有什么功能？

简单说几个关键词ESLint、Stylelint、Less、SASS、CSS、html与js自动注入等，细节的就不说太多了。

为什么缺少图片压缩？

这的由于Windows平台原因，其实webpack可以使用ImageMinimizerWebpackPlugin插件进行图片压缩，而压缩工具基于两种：

This plugin can use 2 tools to compress images:

imagemin – optimize your images by default, since it is stable and works with all types of images
squoosh – while working in experimental mode with .jpg, .jpeg, .png, .webp, .avif file types.

这两种工具在Windows下并不好使，安装依赖经常会出现安装不上，或安装上后，功能并不可用，曾使用Poweshell安装成功过。但是压缩效果也并不好，推荐使用PNGGauntlet或者TinyPng。

为什么html-loader安装了却注释掉，不启用？

不得不说html-loader唯一一个看得上的功能就是针对html中的img标签src直接连接图片可以将其图片剥离出来，但是这个功能webpack5的Asset Modules早已经实现，并且不再需要raw-loader、url-loader、file-loader这些依赖。

加上html-loader的大多数功能与MiniCssExtractPlugin重复，并且也没有MiniCssExtractPlugin应用广泛和强大。

此webpck demo的一些介绍

公司大部分文档要求英文，就讲究看吧。

webpack

A webpack demo.

Features

• ESLint and Stylelint are automatically formatted and fixed.
• Support the introduction and separation of CSS, Less, and Sass.
• HTML and JS are automatically injected, and the file name is one-to-one (except for main.js).
• Commonly cited files are automatically separated and cited as shared files.
• Images in JS and CSS are automatically extracted.

Installation

Installation dependencies.

npm install

Development

npm run dev

Build

npm run build

代码仓库：https://github.com/faganer/webpack-demo