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


Posted in Javascript onJune 05, 2020

有的时候我们想要同时生成压缩和未压缩的文件,比如我们构建 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 如何同时输出压缩和未压缩的文件的文章就介绍到这了,更多相关webpack 如何同时输出压缩和未压缩的文件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
javascript数组组合成字符串的脚本
Jan 06 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
Node.js简单入门前传
Aug 21 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 #Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 #Javascript
JS删除数组指定值常用方法详解
Jun 04 #Javascript
Vue项目接入Paypal实现示例详解
Jun 04 #Javascript
Paypal支付不完全指北
Jun 04 #Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 #Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 #Javascript
You might like
基于php split()函数的用法详解
2013/06/05 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
异步加载script的代码
2011/01/12 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
Python生成随机密码
2015/03/10 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
virtualenv介绍及简明教程
2020/06/23 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
建筑工程实习自我鉴定
2013/09/19 职场文书
简单英文演讲稿
2014/01/01 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
村班子对照检查材料
2014/08/18 职场文书
营销经理工作检讨书
2014/11/03 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
hive数据仓库新增字段方法
2022/06/25 数据库