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控制frame,iframe的src属性代码
Dec 31 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
javascript History对象原理解析
2020/02/17 Javascript
Django中使用group_by的方法
2015/05/26 Python
给Python入门者的一些编程建议
2015/06/15 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
网络工程师职业规划
2014/02/10 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
护士医德考评自我评价
2015/03/03 职场文书
员工升职自荐信
2015/03/27 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis