├── .gitattributes ├── .gitignore ├── .npmignore ├── license ├── package.json ├── readme.md ├── src ├── index.js └── util.js └── test ├── src ├── img │ ├── favicon.ico │ ├── gz.jpg │ ├── pig-1.jpg │ ├── pig-2.jpg │ └── pig-3.jpg ├── index.html ├── index.js ├── index.scss └── reset.css └── webpack.config.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * linguist-language=javascript -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist 3 | node_modules 4 | package-lock.json 5 | yarn.lock -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist 3 | node_modules 4 | package-lock.json 5 | yarn.lock -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020-present, Joway Young, https://github.com/JowayYoung 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tinyimg-webpack-plugin", 3 | "version": "0.1.0", 4 | "description": "A Webpack Plugin For Compressing Image", 5 | "keywords": [ 6 | "tinyimg-webpack-plugin", 7 | "tiny", 8 | "tinyimg", 9 | "tinyjpg", 10 | "tinypng", 11 | "webpack", 12 | "plugin", 13 | "minimizer", 14 | "compress", 15 | "image", 16 | "img", 17 | "jpg", 18 | "png" 19 | ], 20 | "author": { 21 | "name": "JowayYoung", 22 | "phone": "18819249731", 23 | "email": "young.joway@aliyun.com" 24 | }, 25 | "homepage": "https://github.com/JowayYoung", 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/JowayYoung/tinyimg-webpack-plugin" 29 | }, 30 | "license": "MIT", 31 | "type": "module", 32 | "main": "src/index.js", 33 | "scripts": { 34 | "remove": "rimraf node_modules package-lock.json yarn.lock", 35 | "test": "webpack --config test/webpack.config.js" 36 | }, 37 | "engines": { 38 | "node": ">=16.0.0", 39 | "npm": ">=7.10.0" 40 | }, 41 | "dependencies": { 42 | "chalk": "5.0.0", 43 | "figures": "4.0.0", 44 | "schema-utils": "4.0.0", 45 | "trample": "0.4.0" 46 | }, 47 | "devDependencies": { 48 | "@babel/core": "7.16.10", 49 | "@babel/preset-env": "7.16.11", 50 | "babel-loader": "8.2.3", 51 | "clean-webpack-plugin": "4.0.0", 52 | "css-loader": "6.5.1", 53 | "html-webpack-plugin": "5.5.0", 54 | "mini-css-extract-plugin": "2.5.2", 55 | "sass": "1.49.0", 56 | "sass-loader": "12.4.0", 57 | "webpack": "5.67.0", 58 | "webpack-cli": "4.9.1", 59 | "webpackbar": "5.0.2" 60 | }, 61 | "peerDependencies": { 62 | "webpack": ">=5.0.0", 63 | "webpack-cli": ">=4.0.0" 64 | } 65 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Tinyimg Webpack Plugin 2 | 3 | [![author](https://img.shields.io/badge/author-JowayYoung-f66.svg)](https://github.com/JowayYoung/tinyimg-webpack-plugin) 4 | [![version](https://img.shields.io/badge/version-0.1.0-f66.svg)](https://github.com/JowayYoung/tinyimg-webpack-plugin) 5 | [![node](https://img.shields.io/badge/node-%3E%3D16.0.0-3c9.svg)](https://github.com/JowayYoung/tinyimg-webpack-plugin) 6 | [![npm](https://img.shields.io/badge/npm-%3E%3D7.10.0-3c9.svg)](https://github.com/JowayYoung/tinyimg-webpack-plugin) 7 | [![test](https://img.shields.io/badge/test-passing-f90.svg)](https://github.com/JowayYoung/tinyimg-webpack-plugin) 8 | [![build](https://img.shields.io/badge/build-passing-f90.svg)](https://github.com/JowayYoung/tinyimg-webpack-plugin) 9 | [![coverage](https://img.shields.io/badge/coverage-100%25-09f.svg)](https://github.com/JowayYoung/tinyimg-webpack-plugin) 10 | [![license](https://img.shields.io/badge/license-MIT-09f.svg)](https://github.com/JowayYoung/tinyimg-webpack-plugin) 11 | 12 | > `tinyimg-webpack-plugin`是一个压缩图像的Webpack扩展器，提供**JPG**与**PNG**的压缩功能 13 | 14 | ### 安装 15 | 16 | - 使用**NPM**安装：`npm i tinyimg-webpack-plugin` 17 | - 使用**Yarn**安装：`yarn add tinyimg-webpack-plugin` 18 | 19 | > 安装准备 20 | 21 | - 提前安装`webpack`与`webpack-cli`：`npm i webpack webpack-cli` 22 | - 必须依赖`webpack v5`与`webpack-cli v4` 23 | 24 | > 安装失败 25 | 26 | - 切换**NPM镜像**为淘宝镜像：`npm config set registry https://registry.npm.taobao.org/` 27 | - 重新执行安装命令：`npm i tinyimg-webpack-plugin` 28 | 29 | > 兼容版本 30 | 31 | - ⚠️ 若需兼容`webpack v4`请安装`tinyimg-webpack-plugin@0.0.6` 32 | 33 | ### 使用 34 | 35 | ⚠️ 建议只在生产环境下使用 36 | 37 | 配置|功能|取值|默认|描述 38 | :-:|:-:|:-:|:-:|- 39 | `logged`|打印日志|`Boolean`|`false`|打印压缩图像相关信息 40 | 41 | ```js 42 | import TinyimgPlugin from "tinyimg-webpack-plugin"; 43 | 44 | export default { 45 | // 其他Webpack配置 46 | plugins: [ 47 | new TinyimgPlugin({ logged: true }) 48 | ] 49 | }; 50 | ``` 51 | 52 | ### 版权 53 | 54 | MIT © [JowayYoung](https://github.com/JowayYoung) 55 | 56 | ### 后记 57 | 58 | **关注公众号`IQ前端`，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔** 59 | 60 | ![IQ前端](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/131dd0053e87483d89518a15a5fe211f~tplv-k3u1fbpfcp-zoom-1.image) -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { request } from "https"; 2 | import { URL } from "url"; 3 | import Chalk from "chalk"; 4 | import Figures from "figures"; 5 | import { validate } from "schema-utils"; 6 | import { ByteSize, RoundNum } from "trample/dist/node.js"; 7 | import Webpack from "webpack"; 8 | 9 | import { IMG_REGEXP, OPTS_SCHEMA, PLUGIN_NAME, RandomHeader } from "./util.js"; 10 | 11 | const { blueBright, greenBright, redBright, yellowBright } = Chalk; 12 | const { cross, tick } = Figures; 13 | const { Compilation, sources } = Webpack; 14 | 15 | export default class TinyimgWebpackPlugin { 16 | constructor(opts = {}) { 17 | this.opts = opts; 18 | validate(OPTS_SCHEMA, opts, { name: PLUGIN_NAME }); 19 | } 20 | apply(compiler) { 21 | const { logged } = this.opts; 22 | // DEP_WEBPACK_COMPILATION_ASSETS 23 | // https://juejin.cn/post/6953259412651769869 24 | // https://juejin.cn/post/7011025053013770270 25 | // https://juejin.cn/post/7013995927874568206 26 | compiler.hooks.thisCompilation.tap(PLUGIN_NAME, compilation => { 27 | const opts = { 28 | name: PLUGIN_NAME, 29 | stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS 30 | }; 31 | compilation.hooks.processAssets.tapPromise(opts, assets => { 32 | const imgs = Object.keys(assets).filter(v => IMG_REGEXP.test(v)); 33 | if (!imgs.length) return Promise.resolve(); 34 | const promises = imgs.map(v => this.compressImg(assets, v)); 35 | return Promise.all(promises).then(res => logged && res.forEach((v, i) => console.log(i < res.length - 1 ? v : `${v}\n`))); 36 | }); 37 | }); 38 | } 39 | async compressImg(assets = null, path = "") { 40 | try { 41 | const file = assets[path].source(); 42 | const obj = await this.uploadImg(file); 43 | const data = await this.downloadImg(obj.output.url); 44 | const oldSize = redBright(ByteSize(obj.input.size)); 45 | const newSize = greenBright(ByteSize(obj.output.size)); 46 | const ratio = blueBright(RoundNum(1 - obj.output.ratio, 2, true)); 47 | const msg = `${tick} Compressed [${yellowBright(path)}] succeeded: Old Size ${oldSize}, New Size ${newSize}, Optimization Ratio ${ratio}`; 48 | assets[path] = new sources.RawSource(Buffer.alloc(data.length, data, "binary")); 49 | return Promise.resolve(msg); 50 | } catch (err) { 51 | const msg = `${cross} Compressed [${yellowBright(path)}] failed: ${redBright(err)}`; 52 | return Promise.resolve(msg); 53 | } 54 | } 55 | downloadImg(url) { 56 | const opts = new URL(url); 57 | return new Promise((resolve, reject) => { 58 | const req = request(opts, res => { 59 | let file = ""; 60 | res.setEncoding("binary"); 61 | res.on("data", chunk => file += chunk); 62 | res.on("end", () => resolve(file)); 63 | }); 64 | req.on("error", e => reject(e)); 65 | req.end(); 66 | }); 67 | } 68 | uploadImg(file) { 69 | const opts = RandomHeader(); 70 | return new Promise((resolve, reject) => { 71 | const req = request(opts, res => res.on("data", data => { 72 | const obj = JSON.parse(data.toString()); 73 | obj.error ? reject(obj.message) : resolve(obj); 74 | })); 75 | req.write(file, "binary"); 76 | req.on("error", e => reject(e)); 77 | req.end(); 78 | }); 79 | } 80 | }; -------------------------------------------------------------------------------- /src/util.js: -------------------------------------------------------------------------------- 1 | import { RandomNum } from "trample/dist/node.js"; 2 | 3 | const IMG_REGEXP = /\.(jpe?g|png)$/; 4 | 5 | const OPTS_SCHEMA = { 6 | additionalProperties: false, 7 | properties: { 8 | logged: { 9 | description: "Print Log", 10 | type: "boolean" 11 | } 12 | }, 13 | type: "object" 14 | }; 15 | 16 | const PLUGIN_NAME = "tinyimg-webpack-plugin"; 17 | 18 | const TINYIMG_URL = [ 19 | "tinyjpg.com", 20 | "tinypng.com" 21 | ]; 22 | 23 | function RandomHeader() { 24 | const ip = new Array(4).fill(0).map(() => parseInt(Math.random() * 255)).join("."); 25 | const index = RandomNum(0, 1); 26 | return { 27 | headers: { 28 | "Cache-Control": "no-cache", 29 | "Content-Type": "application/x-www-form-urlencoded", 30 | "Postman-Token": Date.now(), 31 | "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36", 32 | "X-Forwarded-For": ip 33 | }, 34 | hostname: TINYIMG_URL[index], 35 | method: "POST", 36 | path: "/web/shrink", 37 | rejectUnauthorized: false 38 | }; 39 | } 40 | 41 | export { 42 | IMG_REGEXP, 43 | OPTS_SCHEMA, 44 | PLUGIN_NAME, 45 | TINYIMG_URL, 46 | RandomHeader 47 | }; -------------------------------------------------------------------------------- /test/src/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JowayYoung/tinyimg-webpack-plugin/6d9db897042cce66574e0b5a66786c76bd675c79/test/src/img/favicon.ico -------------------------------------------------------------------------------- /test/src/img/gz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JowayYoung/tinyimg-webpack-plugin/6d9db897042cce66574e0b5a66786c76bd675c79/test/src/img/gz.jpg -------------------------------------------------------------------------------- /test/src/img/pig-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JowayYoung/tinyimg-webpack-plugin/6d9db897042cce66574e0b5a66786c76bd675c79/test/src/img/pig-1.jpg -------------------------------------------------------------------------------- /test/src/img/pig-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JowayYoung/tinyimg-webpack-plugin/6d9db897042cce66574e0b5a66786c76bd675c79/test/src/img/pig-2.jpg -------------------------------------------------------------------------------- /test/src/img/pig-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JowayYoung/tinyimg-webpack-plugin/6d9db897042cce66574e0b5a66786c76bd675c79/test/src/img/pig-3.jpg -------------------------------------------------------------------------------- /test/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tiny Webpack Plugin Demo 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /test/src/index.js: -------------------------------------------------------------------------------- 1 | import "./reset.css"; 2 | import "./index.scss"; 3 | 4 | console.log("页面加载完毕"); -------------------------------------------------------------------------------- /test/src/index.scss: -------------------------------------------------------------------------------- 1 | #root { 2 | height: 100vh; 3 | background: url("./img/gz.jpg") no-repeat center/auto 100%; 4 | } 5 | .pig { 6 | border-radius: 100%; 7 | width: 200px; 8 | height: 200px; 9 | background: no-repeat center/contain; 10 | & + .pig { 11 | margin-left: 20px; 12 | } 13 | box-shadow: 1px 1px 5px rgba(#000, .5); 14 | &-1 { 15 | background-image: url("./img/pig-1.jpg"); 16 | } 17 | &-2 { 18 | background-image: url("./img/pig-2.jpg"); 19 | } 20 | &-3 { 21 | background-image: url("./img/pig-3.jpg"); 22 | } 23 | } -------------------------------------------------------------------------------- /test/src/reset.css: -------------------------------------------------------------------------------- 1 | /* 初始化 */ 2 | a, 3 | abbr, 4 | acronym, 5 | address, 6 | applet, 7 | area, 8 | article, 9 | aside, 10 | audio, 11 | b, 12 | base, 13 | basefont, 14 | bdi, 15 | bdo, 16 | big, 17 | blockquote, 18 | body, 19 | br, 20 | button, 21 | canvas, 22 | caption, 23 | center, 24 | cite, 25 | code, 26 | col, 27 | colgroup, 28 | datalist, 29 | dd, 30 | del, 31 | details, 32 | dir, 33 | div, 34 | dfn, 35 | dialog, 36 | dl, 37 | dt, 38 | em, 39 | embed, 40 | fieldset, 41 | figcaption, 42 | figure, 43 | font, 44 | footer, 45 | form, 46 | frame, 47 | frameset, 48 | h1, 49 | h2, 50 | h3, 51 | h4, 52 | h5, 53 | h6, 54 | head, 55 | header, 56 | hr, 57 | html, 58 | i, 59 | iframe, 60 | img, 61 | input, 62 | ins, 63 | isindex, 64 | kbd, 65 | keygen, 66 | label, 67 | legend, 68 | li, 69 | link, 70 | map, 71 | mark, 72 | menu, 73 | menuitem, 74 | meta, 75 | meter, 76 | nav, 77 | noscript, 78 | object, 79 | ol, 80 | optgroup, 81 | option, 82 | output, 83 | p, 84 | param, 85 | pre, 86 | progress, 87 | q, 88 | rp, 89 | rt, 90 | ruby, 91 | s, 92 | samp, 93 | script, 94 | section, 95 | select, 96 | small, 97 | source, 98 | span, 99 | strike, 100 | strong, 101 | style, 102 | sub, 103 | summary, 104 | sup, 105 | table, 106 | tbody, 107 | td, 108 | textarea, 109 | tfoot, 110 | th, 111 | thead, 112 | time, 113 | title, 114 | tr, 115 | track, 116 | tt, 117 | u, 118 | ul, 119 | var, 120 | video, 121 | wbr, 122 | xmp { 123 | box-sizing: border-box; 124 | margin: 0; 125 | padding: 0; 126 | } 127 | *::before, 128 | *::after { 129 | box-sizing: border-box; 130 | margin: 0; 131 | padding: 0; 132 | } 133 | body { 134 | font: 14px/1 "PingFang SC", "Microsoft YaHei", sans-serif; 135 | -webkit-font-smoothing: antialiased; 136 | -moz-osx-font-smoothing: grayscale; 137 | } 138 | img { 139 | display: block; 140 | border: none; 141 | } 142 | dl, 143 | li, 144 | menu, 145 | ol, 146 | ul { 147 | list-style: none; 148 | } 149 | button, 150 | input, 151 | select, 152 | textarea { 153 | outline: none; 154 | } 155 | a, 156 | a:link, 157 | a:visited, 158 | a:hover, 159 | a:active { 160 | text-decoration: none; 161 | } 162 | /* 浮动方式 */ 163 | .fl { 164 | float: left; 165 | } 166 | .fr { 167 | float: right; 168 | } 169 | .clear { 170 | overflow: hidden; 171 | clear: both; 172 | height: 0; 173 | font-size: 0; 174 | } 175 | .clearfix::after { 176 | display: block; 177 | visibility: hidden; 178 | clear: both; 179 | height: 0; 180 | font-size: 0; 181 | content: ""; 182 | } 183 | /* 定位方式 */ 184 | .pr { 185 | position: relative; 186 | } 187 | .pa { 188 | position: absolute; 189 | } 190 | .pf { 191 | position: fixed; 192 | } 193 | .center { 194 | margin: 0 auto; 195 | } 196 | /* 对齐方式 */ 197 | .tal { 198 | text-align: left; 199 | } 200 | .tac { 201 | text-align: center; 202 | } 203 | .tar { 204 | text-align: right; 205 | } 206 | .taj { 207 | text-align: justify; 208 | } 209 | /* 居中定位 */ 210 | .abs-ct { 211 | position: absolute; 212 | left: 50%; 213 | top: 50%; 214 | transform: translate(-50%, -50%); 215 | } 216 | .abs-cx { 217 | position: absolute; 218 | left: 50%; 219 | transform: translateX(-50%); 220 | } 221 | .abs-cy { 222 | position: absolute; 223 | top: 50%; 224 | transform: translateY(-50%); 225 | } 226 | /* 弹性布局 */ 227 | .flex-ct-x { 228 | display: flex; 229 | justify-content: center; 230 | align-items: center; 231 | } 232 | .flex-ct-y { 233 | display: flex; 234 | flex-direction: column; 235 | justify-content: center; 236 | align-items: center; 237 | } 238 | .flex-fs { 239 | display: flex; 240 | flex-wrap: wrap; 241 | justify-content: space-between; 242 | align-content: space-between; 243 | } 244 | /* 动画模式 */ 245 | .td-camera { 246 | perspective: 1000; 247 | } 248 | .td-space { 249 | transform-style: preserve-3d; 250 | } 251 | .td-box { 252 | backface-visibility: hidden; 253 | } 254 | .gpu-speed { 255 | transform: translate3d(0, 0, 0); 256 | } 257 | /* 其他 */ 258 | .fullscreen { 259 | left: 0; 260 | right: 0; 261 | top: 0; 262 | bottom: 0; 263 | } 264 | .ellipsis { 265 | overflow: hidden; 266 | text-overflow: ellipsis; 267 | white-space: nowrap; 268 | } 269 | .page-at { 270 | overflow: auto; 271 | width: 100%; 272 | height: 100%; 273 | } 274 | .page-fs { 275 | overflow: hidden; 276 | width: 100%; 277 | height: 100%; 278 | } 279 | .round { 280 | border-radius: 100%; 281 | } -------------------------------------------------------------------------------- /test/webpack.config.js: -------------------------------------------------------------------------------- 1 | import { dirname, join } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import BarPlugin from "webpackbar"; 4 | import { CleanWebpackPlugin as CleanPlugin } from "clean-webpack-plugin"; 5 | import HtmlPlugin from "html-webpack-plugin"; 6 | import MiniCssExtractPlugin from "mini-css-extract-plugin"; 7 | 8 | import TinyimgPlugin from "../src/index.js"; 9 | 10 | const __dirname = dirname(fileURLToPath(import.meta.url)); 11 | 12 | const PATH = { 13 | entryHtml: join(__dirname, "./src/index.html"), 14 | entryIco: join(__dirname, "./src/img/favicon.ico"), 15 | entryJs: join(__dirname, "./src/index.js"), 16 | output: join(__dirname, "./dist") 17 | }; 18 | 19 | const LOADER_OPTS = { 20 | babel: { 21 | babelrc: false, 22 | cacheDirectory: true, 23 | presets: [ 24 | "@babel/preset-env" 25 | ] 26 | }, 27 | css: { importLoaders: 2 }, 28 | minicss: { publicPath: "../" }, 29 | scss: { sassOptions: { fiber: false } } 30 | }; 31 | 32 | export default { 33 | devtool: false, 34 | entry: PATH.entryJs, 35 | mode: "production", 36 | module: { 37 | rules: [{ 38 | exclude: /node_modules/, 39 | include: /src/, 40 | test: /\.css$/, 41 | use: [ 42 | { loader: MiniCssExtractPlugin.loader, options: LOADER_OPTS.minicss }, 43 | { loader: "css-loader", options: LOADER_OPTS.css } 44 | ] 45 | }, { 46 | exclude: /node_modules/, 47 | include: /src/, 48 | test: /\.scss$/, 49 | use: [ 50 | { loader: MiniCssExtractPlugin.loader, options: LOADER_OPTS.minicss }, 51 | { loader: "css-loader", options: LOADER_OPTS.css }, 52 | { loader: "sass-loader", options: LOADER_OPTS.scss } 53 | ] 54 | }, { 55 | exclude: /node_modules/, 56 | include: /src/, 57 | test: /\.js$/, 58 | use: [{ loader: "babel-loader", options: LOADER_OPTS.babel }] 59 | }, { 60 | exclude: /node_modules/, 61 | generator: { filename: "img/[name][ext]" }, 62 | include: /src/, 63 | test: /\.(jpe?g|png)$/, 64 | type: "asset/resource" 65 | }] 66 | }, 67 | output: { 68 | filename: "js/[name].bundle.js", 69 | path: PATH.output, 70 | publicPath: "" 71 | }, 72 | plugins: [ 73 | new BarPlugin({ name: "Webpack Build" }), 74 | new CleanPlugin({ 75 | cleanOnceBeforeBuildPatterns: PATH.output, 76 | protectionWebpackAssets: false 77 | }), 78 | new HtmlPlugin({ 79 | favicon: PATH.entryIco, 80 | filename: "index.html", 81 | inject: "body", 82 | template: PATH.entryHtml 83 | }), 84 | new MiniCssExtractPlugin({ 85 | filename: "css/[name].bundle.css" 86 | }), 87 | new TinyimgPlugin({ logged: true }) 88 | ] 89 | }; --------------------------------------------------------------------------------