文件压缩分三种类型js，css，html。

1、JS文件的压缩：

uglifyjs-webpack-plugin

webpack4以上已经内置了js的压缩插件uglifyjs-webpack-plugin，如要修改插件的配置还是要下载之后再修改，默认打包之后已压缩js代码。

terser-webpack-plugin

webpack5及以上已经内置了js的压缩插件terser-webpack-plugin，如要修改插件的配置还是要下载之后再修改，默认打包之后已压缩js代码。

TerserWebpackPlugin | webpack 中文文档

2、CSS文件的压缩

使用optimize-css-assets-webpack-plugin，同时使用cssnano

npm i optimize-css-assets-webpack-plugin -D
npm i cssnano -D

//webpack.config.jsconst OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');module.exports = {plugins:[new OptimizeCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require('cssnano')})]
}

CssMinimizerWebpackPlugin

这个插件使用 cssnano 优化和压缩 CSS。就像 optimize-css-assets-webpack-plugin 一样，但在 source maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行。

CssMinimizerWebpackPlugin | webpack 中文文档

3、HTML压缩

使用html-webpcak-plugin

npm install --save-dev html-webpack-plugin   //安装

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');module.exports = {entry: 'index.js',output: {path: path.resolve(__dirname, './dist'),filename: 'index_bundle.js',},plugins: [// 如果有两个html需要加两个，此处后期会进行优化处理。new HtmlWebpackPlugin({template: path.join(__dirname, 'src/index.html'),filename:'index.html',chunks: ['index'],inject: true,minify:{html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false}}),new HtmlWebpackPlugin({template: path.join(__dirname, 'src/search.html'),filename:'search.html',chunks: ['search'],inject: true,minify:{html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false}})],
};

webpack之css/js/html文件的压缩相关推荐

JAVA中解决Filter过滤掉css,js,图片文件等问题
JAVA中解决Filter过滤掉css,js,图片文件等问题参考文章: (1)JAVA中解决Filter过滤掉css,js,图片文件等问题 (2)https://www.cnblogs.com/er ...
tp view html 引用css,TP5.1：将外部资源引入到框架中（css/js/font文件）
为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...
webpack4--提取css到单独文件并且压缩css
提取css到build/css目录下:mini-css-extract-plugin插件压缩css:optimize-css-assets-webpack-plugin插件 Uglify是压缩js: ...
webpack打包css和less文件
1. 前言 webpack是不能直接处理 css .less.图片等资源的,需要使用对应的 loader ,有关loader的介绍请查看这篇博客 webpack中的loader 2. 打包css文件 ...
js创建文件并压缩成zip
需要下载 jszip.min.js 创建文件以及写入文件需要下载 FileSaver.min.js 压缩文件 <!DOCTYPE html> <html lang=" ...
Java工具封装：Html、Css、Javascript文件内容压缩
文章目录 1. Javascript压缩 1.1 closure-compiler 2. Html压缩 2.1 htmlcompressor 3. Css压缩 3.1 yuicompressor 1. ...
html css js书写规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...
webpack：js、css、es6装载与压缩配置-学习笔记
文章目录 webpack:js.css.es6装载与压缩配置-学习笔记 css文件打包 loader执行顺序 loader与plugin区别 less css抽取 js,css压缩处理依赖包降级处理 ...
webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件...
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

webpack之css/js/html文件的压缩

1、JS文件的压缩：

2、CSS文件的压缩

3、HTML压缩

webpack之css/js/html文件的压缩相关推荐

最新文章

热门文章