webpack压缩js和html及js兼

北京哪家医院痤疮好 http://pf.39.net/bdfyy/bdflx/210312/8740647.html

一、压缩js和html

1、压缩js

只需要把mode值设置为production即可，因为生产环境下自动压缩js代码。生产环境下会加载很多插件，比如：会将process.env.NODE_ENV的值设为production。启用UglifyJsPlugin，此插件会压缩JS

2、压缩html

plugins:[newHtmlWebpackPlugin({template:"./src/index.html",//压缩HTML代码minify:{//移除空格collapseWhitespace:true,//移除空格removeComments:true,//移除注释},}),],

二、js兼容性处理

1、基本js兼容性处理

IE浏览器不认识ES6及以上的语法，所以我们需要做兼容性处理，此时就用到了babel。需要下载babel-loader、

babel-core、

babel/preset-env

npmibabel-loader

8.0.6

babel/core

7.8.4

babel/preset-env

7.8.4-D

相关配置如下：

module:{rules:[//js兼容性处理:babel-loader{test:/\.js/,exclude:/node_modules/,loader:"babel-loader",options:{//预设，作用:指示babel做怎么样的兼容性处理presets:["

babel/preset-env"]}}]}

问题：只能转换基本语法，如promise高级语法不能转换。

2、全部js兼容性处理，使用

babel/polyfill包，下载

npmi

babel/polyfill

7.8.3

使用的时候只需要在js文件中引入即可

import"

babel/polyfill";constadd=(x,y)={returnx+y;}console.log(add(2,3));constpromise=newPromise((resolve)={setTimeout(()={console.log("定时器执行结束");resolve();},)})

问题：只要解决部分兼容性问题，但将所有兼容性代码全部引入，体积太大了。

3、按需加载，使用corejs库，下载该库

npmicore-js

3.6.4-D

相关配置如下：

module:{rules:[//js兼容性处理:babel-loader{test:/\.js/,exclude:/node_modules/,loader:"babel-loader",options:{//预设，作用:指示babel做怎么样的兼容性处理presets:[["

babel/preset-env",{//按需加载useBuiltIns:"usage",//指定core-jscorejs:{version:3},//指定兼容性做到哪个版本浏览器targets:{chrome:"60",firefox:"60",ie:"9",safari:"10",edge:"17"}}]]}}]}小丸子

转载请注明：http://www.aierlanlan.com/rzdk/444.html