webpack压缩（webpack压缩图片）

25-02-15 16

针对webpack压缩和webpack压缩图片这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展38.WebPack入口和出口＆局部安装webpack＆package.json中定义启动、53

针对webpack压缩和webpack压缩图片这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展38. WebPack 入口和出口＆局部安装webpack ＆ package.json中定义启动、53 webpack概念、webpack核心介绍、webpack使用、645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug、gzip压缩|webpack配置compression-webpack-plugin等相关知识，希望可以帮助到你。

本文目录一览：

webpack压缩（webpack压缩图片）
38. WebPack 入口和出口＆局部安装webpack ＆ package.json中定义启动
53 webpack概念、webpack核心介绍、webpack使用
645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug
gzip压缩|webpack配置compression-webpack-plugin

webpack压缩（webpack压缩图片）

国庆节前,用react写了个小项目,写完就扔给别人,然后出去浪了…等回来,被告知JS文件太大(770KB),用户体验太差. 然后改呗
压缩之前的webpack.config.js如下:

var webpack = require("webpack")
module.exports = {
    entry: "./src/app.js",output: {
        path: __dirname+"/build",filename: "bundle.js"
    },module: {
        rules: [{
            test: /\.js$/,exclude: /node_modules/,loader: "babel-loader",query: {
                plugins: ["transform-runtime"],presets: ["es2015","react","stage-2"]
            }
        },{
            test: /\.css$/,loader: "style-loader!css-loader"
        },{
            test: /\.less$/,loader: "style-loader!css-loader!less-loader"
        },{
            test: /\.(png|gif|jpg|jpeg|ico)$/,loader: "url-loader?limit=10240&name=images/[hash:8].name.[ext]"
        }]
    }
}

可以看到没有任何压缩标识,所以打包后就有770KB.
压缩之前的文件结构如下:

webpack.dll.config.js是DLL提取三方库必须的文件,如下

const webpack = require("webpack")
const library = '[name]_lib'
const path = require("path")

module.exports = {
    entry: {
        vendors: ["react"]
    },output: {
        filename: "[name].dll.js",path: __dirname+"/build/",library
    },plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname,"build/[name]-manifest.json"),name: library
        })
    ]
}

数组module.exports.entry.vendors保存第三方库,逗号分隔.

同时,还要对webpack.config.js文件作如下修改:

var webpack = require("webpack")
module.exports = {
    entry: "./src/app.js",plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,manifest: require("./build/vendors-manifest.json")
        }),new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],loader: "url-loader?limit=10240&name=images/[hash:8].name.[ext]"
        }]
    }
}

新增的只是module.exports.plugins这个数组

代码改造之后,在项目根目录下运行如下代码:

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

采用DLL的方式提取第三方库之后的文件结构如下:

新增了三个文件,如上图

vendors.dll.js意在将一些稳定且不经常变化的插件(或框架)打包在一起,将自写代码与插件代码分离,提升开发效率. 而build下的vendors-manifest.json则是缓存设置,减少占用资源.

而压缩的实现具体体现在webpack.config.js里的module.exports.plugins[1],它是webpack自带的压缩插件,直接使用即可.
压缩后的文件大小(bundle.js+vendors.dll.js)只有300多K
在index.html需要按下面方式引用
注意加载顺序

<script src="./build/vendors.dll.js"></script>
<script src="./build/bundle.js"></script>

由于webpack版本不同(此为webpack3.x),可能会有一些报错,自行领会 :<)
另外介绍两篇文章,讲的比我好多了

彻底解决 webpack 打包文件体积过大
Webpack DLL 用法

38. WebPack 入口和出口＆局部安装webpack ＆ package.json中定义启动

如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时,直接读取。

创建一个webpack.config.js文件　　【目前这个文件名是写死的】　　

const path = require('path')        //请先执行 npm init   先安装NODE一些相关东西

module.exports = {
    //入口: 可以是字符串、数组、对象，这里我们入口只有一个，所以写一个字符串即可
    entry:'./src/main.js',
    //出口，通常是一个对象,path是路径（绝对路径），filename是导出的文件名
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

webpack.config.js

可以看出，获取绝对路径是动态获取然后用函数拼起来的，主要依赖Node里面的 path，这个path哪里来？那就要执行 npm init 安装预加载的东西才可以。【目录路径需要进入到工程然后执行语句】

当你执行完 npm init 就会生成一个 package.json 文件

然后你尝试执行 webpack语句，就可以正常打包了，打包他会在 webpack.config.js 找入口和出口，进行一系列的操作:

然后会打包，放入到指定的导出文件路径。

局部安装webpack

目前，我们使用的webpack是全局的webpack，如果我们想使用局部来打包呢？

因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。

所以通常一个项目，都有自己局部的webpack。‘’

项目中需要安装自己局部的webpack：

这里示例局部安装webpack3.6.0【Vue CLI3中已经升级到webpack4，但是它将配置文件隐藏了起来，所以查看起来不是很方便。】

npm install webpack@3.6.0 --save-dev　　　　允许这句话即可安装局部webpack3.6.0版本【目录路径需要进入到工程】

53 webpack概念、webpack核心介绍、webpack使用

webpack概念

Webpack 前端资源模块化管理和打包工具。可以将许多松散的模块按照依赖和引用关系打包成符合生产环境部署的前端资源。并将按需加载的模块进行代码分隔，等到实际需要的时候再加载。

开发环境：我们本地的环境或测试环境 development

生产环境：线上环境，比如：我们昨天讲的环境部署 production

为什么学习webpack

搭建前端开发环境（vue、react）、热更新、代码压缩等

但是webpack又依赖node环境。

node你接口不会写。你会安装node即可。

学习node的两层含义：1、写动态网站（写接口） 2、为前端开发环境服务

webpack官网

https://www.webpackjs.com/

准备工作

1、先安装node

2、安装webpack和webpack-cli

npm i webpack@4 webpack-cli@3 -g

webpack核心介绍

配置文件:webpack.config.js

注意：写js代码，同时webpack基于node，所以也可以写node相关的代码（不是写http服务）。最多用上：path、和commonjs规范

键名	概念	解释
context	入口起点	基础目录，绝对路径，用于从配置中解析入口起点(entry point)
entry	入口 (必须)	配置打包入口文件的名字
output	出口 (必须)	打包后输出到哪里, 和输出的文件名
module	加载器配置	在rules对应数组中, 定义对象规则
plugins	插件配置	配置插件功能（插件有着webpack不具备的某些功能，比如：压缩html文件）

webpack只认识js文件，像图片、css、字体件... webpack不认识，不认识的文件使用加载器处理

webpack有很多的插件。插件就是丰富webpack功能的。比如：压缩js

webpack使用

打包js代码

1、单入口单出口（主流）

/*
    webpack依赖node环境 。
    这个js文件中，写的虽然是js。但是所有的node相关的都可以写。

*/ 
const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.join( __dirname,'dist' ),//把entry（入口文件）打包到哪个目录 必须是个绝对路径
        filename:'bundle.js',//打包后生成的文件名
    }
}

//默认认为你要打包上线了，上线了就是说要部署到服务器生产环境（要把所有的代码压缩）

2、多入口单出口

module.exports = {
    context:path.join(__dirname,"src"),
    entry:['./main.js','./test1.js'],
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    }
}

3、多入口多出口

module.exports = {
    context:path.join(__dirname,"src"),
    entry:{
        first:'./main.js',
        second:'./test1.js'
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js'
    }
}

打包css

webpack是基于node的。而node只认识js文件。css是不能直接打包的。所以要找对应认识某文件的loader（加载器）

module属性。

讲这个案例的目的：

1、处理不了文件用对应的loader。webpack对一些loader模块的版本是有要求。

2、devDependencies深刻认识。（开发依赖） devpendencies：项目依赖

步骤：

css-loader 3版本 style-loader 2版本

npm i css-loader@3 style-loader@2 -D

devDependencies：开发依赖（上线是不需要的，只是开发的时候才使用），只开发阶段使用，线上不需要。

dependencies：项目依赖，无论上线还是开发阶段都需要，

module: {
    rules: [ 
        { 
            test: /\.css$/, 
            use: [ 'style-loader', 'css-loader' ]
        }
    ]
}

分离css

extract-text-webpack-plugin@next 插件

安装下载

npm i extract-text-webpack-plugin@next -D

加载器修改配置

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
rules: [ // 加载器的使用规则
	{
		test: /\.css$/,
		use: ExtractTextPlugin.extract({ // 从一个已存在的 loader 中，创建一个提取(extract) loader。
			fallback: "style-loader", 
        	use: "css-loader"  // loader被用于将资源转换成一个CSS单独文件
        })
	}
]

插件配置

new ExtractTextPlugin("style.css"), // 输出的文件名

报错说明：

Error: Cannot find module 'webpack/lib/Chunk'

解决方案：在项目目录下下载webpack@4

打包less

需要安装less 和 less-loader 来解析less代码, 和加载less文件

npm i less@3 less-loader@7 -D

在webpack.config.js中配置加载器, 解析.less文件

{ 
	test: /\.less$/, 
	use: ['style-loader', 'css-loader', "less-loader"]
}

但是这样发现css代码没有分离出来, 所以还需要使用extract-text-webpack-plugin的配置, 分离出css代码

{ 
	test: /\.less$/, 
	use: ExtractTextPlugin.extract({ 
		fallback: "style-loader", 
		use: ['css-loader', "less-loader"]
	})
}

观察打包后style.css中多了less文件里的样式代码

生成html

html-webpack-plugin插件。

下载

npm i html-webpack-plugin@4 -D

注意：插件需要显示的引入到webpack.config.js中

plugins属性

plugins:[
        new HtmlWebpackPlugin({ // 插件配置对象
            title: "webpack 的使用",
            filename: "index.html", // 产出文件名(在dist目录查看)
            template: __dirname + "/index.html", // 以此文件来作为基准(注意绝对路径, 因为此文件不在src下)
            favicon: "./assets/favicon.ico", // 插入打包后的favicon图标
            minify: {                             //对html文件进行压缩，
                    collapseBooleanAttributes: true,  //是否简写boolean格式的属性如：disabled="disabled"简写为disabled
                    minifyCSS: true,                  //是否压缩html里的css（使用clean-css进行的压缩） 默认值false
                    minifyJS: true,                   //是否压缩html里的js（使用uglify-js进行的压缩）
                    removeAttributeQuotes: true,      //是否移除属性的引号 默认false
                    removeComments: true,             //是否移除注释 默认false
                    removeCommentsFromCDATA: true,    //从脚本和样式删除的注释, 默认false
             }
        }) // 数组元素是插件的new对象
    ]

报错说明

Cannot find module "webpack/lib/node/NodeTeplatePlugins"

在安装html-webpack-plugin插件的工程中, 单独的在本地安装一下跟全局webpack对应的版本

npm i webpack@4 -D

处理css中的资源（图片和字体）

我们的背景图片和自定义图标放在src的assets文件夹下。html中引入的图片：logo放置在static文件夹下（不需要打包，它只是copy一份）。

需要下载2个加载器模块

url-loader、file-loader

下载：

npm i url-loader file-loader -D

注意: webpack认为, 图片也是一个模块, 所以才需要loader来解析图片)

2.webpack.config.js加载器配置:

在module中加上此配置。

 {
       test: /\.(png|jpg|jpeg|gif|svg)$/, // 处理这些结尾的文件
        use: 'url-loader'
 }

// 如果处理字体图标需要引入这个
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader'
}

使用jquery（面向模块化开发）

在webpack打包的项目中, 使用jQuery功能

下载jquery模块,

npm i jquery

在main.js中引入jquery,

import $ from 'jquery'

热更新

webpack-dev-server会实时监听文件变化, 自动打包到内存中, 而不是生成硬盘上的dist目录

webpack-dev-server 它还会启动一个本地的服务器, 来支持你访问打包后的html网页

下载webpack-dev-server -g

npm i webpack-dev-server -g

webpack-dev-server --version

在项目下运行命令: webpack-dev-server 可启动热更新服务器, 会根据目录下的webpack.config.js,只是在内存中运行起来了。

注意: 如果修改了配置(webpack.config.js)文件, 还是需要重启终端, 如果是src下的代码, 会自动打包

注意: 默认需要打包输出的文件名必须为 index.html文件

默认在端口号:8080上启动我们热更新服务器, 项目都在这个服务器上打开访问

当开发完毕还需要使用webpack命令进行打包到dist目录。

webpack.config.js配置：

devServer: { // 在这里可以对webpack-dev-server进行一些配置
        port: 9090, //修改端口号，默认为8080
        open: true, // 自动调用默认浏览器打开
}

645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug

^-

前端小菜鸟，喜欢前端，不断学习
微信：jie178463596
微信小群：纯粹讨论技术、面试、工作为主，划水少，拒绝广告

认识Plugin

CleanWebpackPlugin

HtmlWebpackPlugin

生成的index.html分析

自定义HTML模板

自定义模板数据填充

DefinePlugin的介绍

DefinePlugin的使用

copyWebpackPlugin

目录结构

wk.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack'); // DefinePlugin是webpack内置插件
const copyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "js/bundle.js",
    // 必须是一个绝对路径
    path: path.resolve(__dirname, "./build"),
    // assetmodulefilename: "img/[name].[hash:6][ext]"
  },
  module: {
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        use: [
          // { loader: "css-loader" },
          // 注意: 编写顺序(从下往上, 从右往做, 从后往前)
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
        ],
        // loader: "css-loader"
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        // type: "asset/resource", file-loader的效果
        // type: "asset/inline", url-loader
        type: "asset",
        generator: {
          filename: "img/[name].[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      },
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:6][ext]"
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "哈哈 webpack",
      template: "./public/index.html"
    }),
    new DefinePlugin({
      // 要包裹两层引号
      BASE_URL: '"./"'
    }),
    new copyWebpackPlugin({
      patterns: [
        {
          // to: xxx, // 不用写，默认会使用output.path
          from: "public",
          globOptions: {
            ignore: [
              "**/index.html",
              "**/.DS_Store",
              "**/abc.txt"
            ]
          }
        }
      ]
    })
  ]
}

publuc/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

build/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <link rel="icon" href="./favicon.ico">
    
    <title>杰帅的webpack</title>
  <script defer src="js/bundle.js"></script></head>
  <body>
    <noscript>
      <strong>We're sorry but 杰帅的webpack doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

gzip压缩|webpack配置compression-webpack-plugin

gzip压缩文件&webPack配置Compression-webpack-plugin

作用：提升网络传输速率=>优化web页面加载时间

基本原理

浏览器请求资源文件时会自动带一个Accept-Encoding的请求头告诉服务器支持的压缩编码类型
服务器配置开启gzip选项：
接收客户端资源文件请求，查看请求头Content-encoding支持的压缩编码格式，如果是包含gzip那么
在每次响应资源请求之前进行gzip编码压缩后再响应返回资源文件(在响应头会带上Content-encoding: gzip)
浏览器接收到响应后查看请求头是否带有Content-encoding:gzip，如果有进行对返回的资源文件进行解压缩然后再进行解析渲染

注意点

低版本浏览器兼容性，服务器可以设置一些忽略规则忽略为浏览器
媒体文件无需开启:图片、音乐和视频大多数都已压缩过了，HTML,CSS AND JAVARSCRIPT
CPU负载：压缩文件耗费CPU（服务器需要压缩文件、浏览器解压文件）

webpack优化

如果你使用了webpack，那么可以借助CompressionWebpackPlugin插件来提前对文件进行Gzip压缩
这样服务器查找到有与源文件同名的.gz文件就会直接读取，不会主动压缩，降低cpu负载，优化了服务器性能
webpack配置：

其他相关

Content-Encoding

gzip
表示采用 Lempel-Ziv coding (LZ77) 压缩算法，以及32位CRC校验的编码方式。这个编码方式最初由 UNIX 平台上的 gzip 程序采用。出于兼容性的考虑， HTTP/1.1 标准提议支持这种编码方式的服务器应该识别作为别名的 x-gzip 指令。

compress
采用 Lempel-Ziv-Welch (LZW) 压缩算法。这个名称来自UNIX系统的 compress 程序，该程序实现了前述算法。
与其同名程序已经在大部分UNIX发行版中消失一样，这种内容编码方式已经被大部分浏览器弃用，部分因为专利问题（这项专利在2003年到期）。

deflate
采用 zlib 结构 (在 RFC 1950 中规定)，和 deflate 压缩算法(在 RFC 1951 中规定)。

identity
用于指代自身（例如：未经过压缩和修改）。除非特别指明，这个标记始终可以被接受。

br
表示采用 Brotli 算法的编码方式。

引自MDNhttps://developer.mozilla.org...

兼容性

服务器启用gzip

node端
nodejs很幸福，只需use一个compress模块

var compression = require(''compression'')
var app = express();
//尽量在其他中间件前使用compression
app.use(compression());

tomcat
找到tomcat的server.xml文件，找到其中Connector节点然后进行配置修改，具体配置如下

<Connectorport="80"protocol="HTTP/1.1" 
useSendfile = "false" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0" useBodyEncodingForURI="true"compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>

useSendfile属性默认为true, 会禁用任何可能的压缩, 改成false就好了

nginx
gzip使用环境:http,server,location,if(x),一般把它定义在nginx.conf的http{…..}之间

gzip on
on为启用，off为关闭

gzip_min_length 1k
设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。

gzip_buffers 4 16k
获取多少内存用于缓存压缩结果，‘4 16k’表示以16k*4为单位获得

gzip_comp_level 5
gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值;

gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php
对特定的MIME类型生效,其中''text/html’被系统强制启用

gzip_http_version 1.1
识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码

gzip_vary on
启用应答头"Vary: Accept-Encoding"

gzip_proxied off
nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)

gzip_disable msie6
(IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库

服务器配置引自juan26=>https://segmentfault.com/a/11...

今天关于webpack压缩和webpack压缩图片的分享就到这里，希望大家有所收获，若想了解更多关于38. WebPack 入口和出口＆局部安装webpack ＆ package.json中定义启动、53 webpack概念、webpack核心介绍、webpack使用、645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug、gzip压缩|webpack配置compression-webpack-plugin等相关知识，可以在本站进行查询。

本文标签：