当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

babel-minify-webpack-plugin

[DEPRECATED] Babel Minify Webpack Plugin

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区不详

投递者宋健柏

操作系统跨平台

开源组织无

适用人群未知

软件概览

DEPREACTED due to lack of support/bug fixes/ new features, project abandoned, please migrate on https://github.com/webpack-contrib/terser-webpack-plugin

Babel Minify Webpack Plugin

A Webpack Plugin for babel-minify - A babel based minifier

Install

npm install babel-minify-webpack-plugin --save-dev

Usage

// webpack.config.js
const MinifyPlugin = require("babel-minify-webpack-plugin");
module.exports = {
  entry: //...,
  output: //...,
  plugins: [
    new MinifyPlugin(minifyOpts, pluginOpts)
  ]
}

Options

minifyOpts

minifyOpts are passed on to babel-preset-minify. You can find a list of all available options in the package directory.

Default: {}

pluginOpts

test: Test to match files against. Default: /\.js($|\?)/i
include: Files to include. Default: undefined
exclude: Files to exclude. Default: undefined
comments: Preserve Comments. Default: /^\**!|@preserve|@license|@cc_on/, falsy value to remove all comments. Accepts function, object with property test (regex), and values.
sourceMap: Configure a sourcemap style. Default: webpackConfig.devtool
parserOpts: Configure babel with special parser options.
babel: Pass in a custom babel-core instead. Default: require("babel-core")
minifyPreset: Pass in a custom babel-minify preset instead. Default: require("babel-preset-minify")

Why

You can also use babel-loader for webpack and include minify as a preset and should be much faster than using this - as babel-minify will operate on smaller file sizes. But then, why does this plugin exist at all? -

A webpack loader operates on single files and the minify preset as a webpack loader is going to consider each file to be executed directly in the browser global scope (by default) and will not optimize some things in the toplevel scope. To enable optimizations to take place in the top level scope of the file, use mangle: { topLevel: true } in minifyOptions.
When you exclude node_modules from being run through the babel-loader, babel-minify optimizations are not applied to the excluded files as it doesn't pass through the minifier.
When you use the babel-loader with webpack, the code generated by webpack for the module system doesn't go through the loader and is not optimized by babel-minify.
A webpack plugin can operate on the entire chunk/bundle output and can optimize the whole bundle and you can see some differences in minified output. But this will be a lot slower as the file size is usually really huge. So there is another idea where we can apply some optimizations as a part of the loader and some optimizations in a plugin.

Maintainers

Boopathi Rajaa

Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin

使用案例

webpack学习笔记（三）优化

压缩js 压缩代码的主要是将代码转换成更小的格式。将代码无损的转换有用的代码。在转换的过程中重写代码的变量，移除整个没有用依赖的代码。修护代码压缩过程在webpack中，用两个字段来控制这个过程，optimization.minimize和optimization.minimizer。我们通过uglifyjs-webpack-plugin来设置上面提到的两个参数。首先是安装， npm ins
转：webpack代码压缩优化

压缩代码 18 天前30前端开发压缩 JavaScript 修改 JavaScript 压缩处理器其他压缩 JavaScript 的方法加快 JavaScript 执行速度作用域提升预执行提升解析压缩 HTML 压缩 CSS 配置 CSS 压缩压缩图像总结从 Webpack 4 开始，默认情况下使用 terser 压缩生产环境下的输出结果。Terser 是一款兼容 ES
babel-polyfill的几种使用方法

前言 preset与plugin的关系: preset中已经包含了一组用来转换ES@next的语法的插件,如果只使用少数新特性而非大多数新特性,可以不使用preset而只使用对应的转换插件 babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill 使用转换插件:babel-plugin-transform-xxx 使用方法缺啥补啥,在pack
webpack 代码混淆

webpack是如何进行代码混淆的。这里用到了一个插件。 uglifyjs-webpack-plugin：https://www.npmjs.com/package/uglifyjs-webpack-plugin npm install uglifyjs-webpack-plugin --save-dev 基中有两个子属性： minimize 正常情况下开发环境为false,生产环境设置
Vue-----webpack基础详解

Vue-----webpack基础详解一、安装：先全局安装，再局部安装：全局：cnpm i webpack webpack-cli -g 局部：cnpm i webpack webpack-cli（在创建项目后，在项目目录中）二、使用： 1、创建项目：手动或者使用命令创建： mkdir app cd app 2、初始化：cnpm init y 3、安装：cnpm i webpack web
webpack

初始化WebPack 一、为什么会有webpack？因为开发者编写的代码是模块化开发，.less .scss .vue .js等文件开发者编写的代码是工程化因为浏览器不能解析vue、react 、less 、scss 等工程化，模块化的代码，所以需要webpack 工具，将编写的模块化代码，进行编译/打包,然后在浏览器中运行的编译后或者打包后的代码。二、webpack是什么？ webpac
vue-cli webpack 项目版本升级

包含 webpack@4 和 babel-loader@8 以及打包部分优化一键升级package.json 文件依赖版本数手动去修改dependencies中各个包的版本号太慢， so 借助了npm-check-updates工具，一键将package.json中的依赖包版本号更新为最新版本。 1、global install npm install -g npm-check-update
webpack5 基础知识篇

一级目录二级目录三级目录一、webpack是什么？ webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 四个核心概念入口(entry) 输出(output) loader 插件(plugins) 在这里对webpack的四个核心概念就不做多余的描述，详情课参考官网：https://www.webpackjs.com/concepts/
一文彻底读懂webpack常用配置

开发环境 const webpack = require("webpack"); const path = require('path') module.exports = { // entry: { // a: './src/0706/a.js', // c: './src/0706/c.js', // }, entry: "./src/0
webpack常用配置

webpack.config.js /* 未使用脚手架打包 //开发环境 webpack '输入文件' -o '输出文件' --mode=development //生产环境 webpack '输入文件' -o '输出文件' --mode=production */ const { resolve } = require("path"); const HtmlWe
webpack4 资源缓存

1、babel缓存在babel-loader中方式一:在options内添加属性 cacheDirectory:true 方式二:use:['babel-loader?cacheDirectory=true'] 2、文件资源缓存在打包输出文件的文件名中添加hash值 hash值缓存,根据每次打包后webpack生成的hash值不同来加载资源会因为使用的都是we

babel-minify-webpack-plugin

Babel Minify Webpack Plugin

Install

Usage

Options

minifyOpts

pluginOpts

Why

Maintainers

同类工具

相关阅读

相关文章

相关问答

相关文档