如何压缩自己的css和js,请问webpack如何压缩css和js，求具体例子代码，谢谢。

绝地灬酷狼 2022-09-02 14:55 94阅读 0赞

![257043e773be206e57c63b19ff0c1a72.png][]

小女王的骑士

可以用UglifyJsPlugin压缩js和css,如果需要需要单独把css提取出来,可以用extract-text-webpack-pluginconst path = require("path");

const htmlWP = require("html-webpack-plugin");

const webpack = require("webpack");

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = \{

entry: "./src/script/main.js",

output: \{

path: path.join(\_\_dirname + "/dist"),

filename: "js/bundle.js"

\},

module: \{

rules: \[\{

test: /\\.css$/,

use: \[

"style-loader",

"css-loader"

\]

\},

\{

test:/\\.(png|svg|jpg|gif)$/,

use:\[

"file-loader"

\]

\},

\{

test:/\\.js$/,

use:\[

"babel-loader"

\],

exclude: path.join(\_\_dirname + "/node\_modules"),

include: path.join(\_\_dirname + "/src")

\}\],

\},

plugins: \[

new htmlWP(\{

filename: "index.html",

template: "index.html",

minify: \{

collapseWhitespace: false,

removeComments: true

\}

\}),

new webpack.LoaderOptionsPlugin(\{

options: \{

postcss: \[require("autoprefixer")(\{

browsers: \["last 5 versions"\]

\})\]

\}

\}),

new UglifyJsPlugin(\{

compress: \{

warnings: false

\}

\}),

new webpack.DefinePlugin(\{

"process.env": \{

NODE\_ENV: JSON.stringify("production")

\}

\})

\]

\};

[257043e773be206e57c63b19ff0c1a72.png]: /images/20220829/82cedf9704d94f029fcb79f42888d743.png

发表评论取消回复

表情：

评论列表（有 0 条评论，94人围观）

还没有评论，来说两句吧...

相关阅读

相关【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！

webpack系列文章： [【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！][Webpack _9_ -] [【Webpa

约定不等于承诺〃/ 2022年09月06日 13:29/ 0 赞/ 102 阅读

相关如何压缩自己的css和js,请问webpack如何压缩css和js，求具体例子代码，谢谢。

![257043e773be206e57c63b19ff0c1a72.png][] 小女王的骑士可以用UglifyJsPlugin压缩js和css,如果需要需要单独把cs

绝地灬酷狼/ 2022年09月02日 14:55/ 0 赞/ 95 阅读

相关 webpack：js、css、es6装载与压缩配置-学习笔记

文章目录 webpack：js、css、es6装载与压缩配置-学习笔记 css文件打包 loader执行顺序 loa

深碍√TFBOYSˉ_/ 2022年08月31日 13:19/ 0 赞/ 101 阅读

相关性能优化--JS、CSS压缩合并

在前台性能优化过程中，减少HTTP请求数量，就可以减少与服务器交互次数，从而很好的提高系统性能，此次通过实践，网络查阅资料，发现两种压缩合并js和css的方

缺乏、安全感/ 2022年08月20日 08:23/ 0 赞/ 174 阅读

相关 css/js的压缩与还原

css/js的在线压缩与还原 1、还原：[http://jsbeautifier.org/][http_jsbeautifier.org] 2、压缩：[http://too

拼搏现实的明天。/ 2022年06月05日 07:44/ 0 赞/ 278 阅读

相关 webpack4打包html和压缩js

打包html使用插件[html-webpack-plugin][] 压缩js使用插件[uglifyjs-webpack-plugin][] 配置文件： const

水深无声/ 2022年05月19日 08:13/ 0 赞/ 250 阅读

相关 webpack4 css打包压缩问题

这两天一直在练习这个webpack4, 发现有好多问题和坑，做开发嘛，一定要有喜欢出问题并喜欢解决问题，坚决踩个坑填个坑的不怕死小强精神！ webpack4 在配置上其实是可

谁借莪１个温暖的怀抱￠/ 2022年02月27日 04:10/ 0 赞/ 300 阅读

相关压缩和还原压缩的JS代码

压缩JS代码： packer – 最好用的 javascript 压缩工具地址： http://dean.edwards.name/packer/ http://

骑猪看日落/ 2021年09月14日 01:32/ 0 赞/ 818 阅读

相关 JS代码的格式化和压缩

href="../../include/file.css" type="text/css" rel="stylesheet" /><script language=JavaSc

古城微笑少年丶/ 2021年09月10日 04:28/ 0 赞/ 279 阅读

相关使用Minify压缩css和js文件详解

使用Minify压缩css和js文件详解如何使用Minify压缩css和js文件 Minify 是用PHP5开发的应用，通过遵循一些Yahoo的优化规则来提高网站的性能...

红太狼/ 2020年06月18日 16:44/ 0 赞/ 642 阅读