webpack 如何同时输出压缩和未压缩的文件的实现步骤

有的时候我们想要同时生成压缩和未压缩的文件，比如我们构建 lib 包的时候，我们希望用户能够使用压缩过后的代码文件作为 cdn 文件，最简单的一个方式就是通过指定环境变量，比如指定 MINIFY，如下：

const path = require('path')

const isMinify = process.env.MINIFY

/**
 * @type {import('webpack').Configuration}
 */
const config = {
 entry: {

  index: './src/index.js'
 },
 output: {
  filename: isMinify ? '[name].min.js' : '[name].js',
  path: path.join(__dirname, 'dist')
 },
 devtool: 'cheap-source-map',
 optimization: {
  minimize: isMinify ? true : false
 }
}

module.exports = config

我们在使用的时候通过指定环境变量就可以打包成不同的版本：

 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build:min": "MINIFY=1 webpack --config=webpack.config.js",
  "build": "webpack --config=webpack.config.js"
 }

不过这样的缺点就是我们需要运行两次。

第二个方法是安装unminified-webpack-plugin，通过这个插件可以生成没有压缩的文件：

const path = require('path')
const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');

/**
 * @type {import('webpack').Configuration}
 */
const config = {
 entry: {
  index: './src/index.js',
 },
 output: {
  filename: '[name].min.js',
  path: path.join(__dirname, 'dist')
 },
 devtool: 'cheap-source-map',
 plugins: [
  new UnminifiedWebpackPlugin({})
 ]
}

module.exports = config

不过这个有个缺点就是未压缩的文件没有 sourcemap。

第三种方法通过指定多个打包入口，然后手动指定压缩插件（uglifyjs、terser等）压缩哪些文件，如我们指定 index.min.js 这个文件才需要压缩，配置如下：

const path = require('path')
const TerserWebpackPlugin = require('terser-webpack-plugin');

/**
 * @type {import('webpack').Configuration}
 */
const config = {
 entry: {
  index: './src/index.js',
  'index.min': './src/index.js'
 },
 output: {
  filename: '[name].js',
  path: path.join(__dirname, 'dist')
 },
 devtool: 'cheap-source-map',
 optimization: {
  minimize: true,
  minimizer: [
   new TerserWebpackPlugin({
    include: /min/,
    sourceMap: true
   })
  ]
 }
}

module.exports = config

关键点如下：

这个时候生成的就完美了。

到此这篇关于webpack 如何同时输出压缩和未压缩的文件的文章就介绍到这了,更多相关webpack 如何同时输出压缩和未压缩的文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue+ElementUI项目使用webpack输出MPA的方法

    一. 需求分析 为另一个项目提供可嵌入的功能单页,大部分页面使用时都是独立功能页,个别页面带有左侧边栏(相当于3-4个页面的整合形态),由于资源定位地址的限定,每个页面打包为单页后,入口html文件需要定制命名,且脚本和样式文件需要放在指定的路径下,公共资源地址也必须替换成特殊字符以适配母系统的调用逻辑(比如下面结构中应用jquery.min.js的路径可能是{{publicRoot}}/{{publicLib}}/jquery.minjs).假设原工程中拥有AB这2个旧页面,现在需要开发CDE

  • webpack 静态资源集中输出的方法示例

    webpack 静态资源集中输出的方法示例

    目录结构 copy-webpack-plugin 工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图.开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片.打包时保留这些静态资源,直接打包到制定文件夹 安装依赖 cnpm install copy-webpack-plugin --save-dev webpack.config.js from:要打包的静态资源目录地址,这里的__dirname是指项目目录下,是node的一种语法,可以直接定位到本机的项目目录

  • webpack 如何同时输出压缩和未压缩的文件的实现步骤

    有的时候我们想要同时生成压缩和未压缩的文件,比如我们构建 lib 包的时候,我们希望用户能够使用压缩过后的代码文件作为 cdn 文件,最简单的一个方式就是通过指定环境变量,比如指定 MINIFY,如下: const path = require('path') const isMinify = process.env.MINIFY /** * @type {import('webpack').Configuration} */ const config = { entry: { index: '

  • webpack拆分压缩css并以link导入的操作步骤

    webpack拆分压缩css并以link导入的操作步骤

    先看一下代码文件结构: 入口文件(index1.js)内容: import $ from 'jquery' import './css/index.css' import './less/index.less' $(function () { $('#app li:nth-child(odd)').css('color', 'red') $('#app li:nth-child(even)').css('color', 'green') }) import './assets/fonts/ico

  • Java解压和压缩带密码的zip文件过程详解

    前言 JDK自带的ZIP操作接口(java.util.zip包,请参看文章末尾的博客链接)并不支持密码,甚至也不支持中文文件名. 为了解决ZIP压缩文件的密码问题,在网上搜索良久,终于找到了winzipaes开源项目. 该项目在google code下托管 ,仅支持AES压缩和解压zip文件( This library only supports Win-Zip's 256-Bit AES mode.).网站上下载的文件是源代码,最新版本为winzipaes_src_20120416.zip,本

  • php使用gzip压缩传输js和css文件的方法

    本文实例讲述了php使用gzip压缩传输js和css文件的方法.分享给大家供大家参考.具体如下: <?php /** * 完整调用示例: * 1.combine.php?t=j&b=public&fs=jslib.jquery,function * * 该例子调用的是网站根目录下的public/jslib/jquery.js和public/function.js * * 2.combine.php?t=j&fs=jslib.jquery,function * * 该例子调用的

  • 项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)

    第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上传的情况下,为了上传图片而去使用form表单感觉很蠢.然后那时候也没有想到用jquery form插件. 后台的同事给的方案是用iframe里写一个form表单,然后上传图片之后自动提交表单,他将图片在服务器上的地址以跳转页url的一部分,我再来截取的方式. 方案一:iframe+form表单 <f

  • Android图片压缩（质量压缩和尺寸压缩）

    在网上调查了图片压缩的方法并实装后,大致上可以认为有两类压缩:质量压缩(不改变图片的尺寸)和尺寸压缩(相当于是像素上的压缩):质量压缩一般可用于上传大图前的处理,这样就可以节省一定的流量,毕竟现在的手机拍照都能达到3M左右了,尺寸压缩一般可用于生成缩略图. 两种方法都实装在了我的项目中,结果却发现在质量压缩的模块中,本来1.9M的图片压缩后反而变成3M多了,很是奇怪,再做了进一步调查终于知道原因了.下面这个博客说的比较清晰: android图片压缩总结 总 结来看,图片有三种存在形式:硬盘上时是

  • Android图片压缩方法并压缩到指定大小

    一.图片质量压缩 /** * 质量压缩方法 * @param image * @return */ public static Bitmap compressImage(Bitmap image) { ByteArrayOutputStream baos = new ByteArrayOutputStream(); image.compress(Bitmap.CompressFormat.JPEG, 100, baos);// 质量压缩方法,这里100表示不压缩,把压缩后的数据存放到baos中

  • ASP.NET Core中预压缩静态文件的方法步骤

    前言 Web应用程序的优化是非常重要,因为使用更少的CPU,占用更少的带宽可以减少项目的费用. 在ASP.NET Core中我们可以很容易的启用响应压缩,但是针对预压缩文件,就需要做一些额外的功能了. 这篇博客文章展示了如何在ASP.NET Core中预压缩静态文件. 下面话不多说了,来一起看看详细的介绍吧 为什么需要预压缩文件? 虽然在从服务器请求文件时, 我们可以动态压缩文件,但这意味这Web服务器需要做更多的额外工作. 其实只有在新的应用程序部署时才会更改要压缩的文件. 越好的压缩效果需要

  • c# 文件压缩zip或将zip文件解压的方法

    1.必须Dll: ICSharpCode.SharpZipLib.dll.可从Nutget程序包中获取. 2.压缩文件 /// <summary> /// 压缩文件成zip /// </summary> /// <param name="fileZip">压缩成zip文件的绝对路径</param> /// <param name="fileName">被压缩指定文件的名字</param> ///

  • 详解Java实现批量压缩图片裁剪压缩多种尺寸缩略图一键批量上传图片

    详解Java实现批量压缩图片裁剪压缩多种尺寸缩略图一键批量上传图片

    10万+IT人都在关注的图片批量压缩上传方案(完整案例+代码) 背景需求:为了客户端访问图片资源时,加载图片更流畅,体验更好,通常不会直接用原图路径,需要根据不同的场景显示不同规格的缩略图,根据商品关键属性,能够获取到图片不同尺寸规格的图片路径,并且能根据不同缩略图直观看到商品的关键属性,需要写一个Java小工具把本地磁盘中的图片资源一键上传至分布式FastDFS文件服务器,并把图片信息存入本地数据库,PC端或者客户端查询商品时,就可以根据商品的业务属性.比如根据productId就能把商品相关

随机推荐