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 相关文章推荐
js 代码优化点滴记录
Feb 19 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
详解 javascript对象创建模式
Oct 30 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PHP 七大优势分析
2009/06/23 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
python中pycurl库的用法实例
2014/09/30 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
zookeeper python接口实例详解
2018/01/18 Python
简述Python2与Python3的不同点
2018/01/21 Python
python 实现A*算法的示例代码
2018/08/13 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
自我鉴定书范文
2013/10/02 职场文书
检讨书模板大全
2015/05/07 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书