webpack4.0关闭开发环境的代码压缩UglifyJsPlugin

最近项目使用的是webpack4.1.1，在使用之前是没有细看更新后版本的文档的，在使用过程中才发现还是有很大的变化。其中一个就是关于UglifyJsPlugin的配置问题。
开发环境是不需要去压缩代码，主要是因为太耗性能了，每修改一个地方就要花几秒去等待页面渲染，说实话这非常浪费开发时间，解决办法就是配置不同的环境变量去在开发环境的时候不要这个UglifyJsPlugin插件，为此，webpack4又增加了新的Mode，且默认值是production，而且更新后的webpack默认是有UglifyJsPlugin这个配置的，也就是说在不设置任何环境变量的情况下，始终会有压缩代码的行为出现，导致编译极其耗时，那我的解决办法就是在package.json文件启动时设置环境变量：

  "scripts": {"dev": "rm -rf ./dist && webpack-dev-server --inline --progress --mode development --config webpack.config.js","build": "rm -rf ./dist && webpack"},

同样的也可以在打包的时候也设置环境变量，这样就不会在开发环境频繁的去压缩代码，节省了很多没必要的等待时间，而且频繁压缩也会导致热更新HotModuleReplacementPlugin根本毫无作用。下面是webpack的配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack')
const path = require('path')const config = {// mode: 'development',entry: {vendor: ['jquery','echarts/lib/echarts','echarts/lib/chart/pie','echarts/lib/chart/bar','echarts/lib/chart/line',      'echarts/lib/component/tooltip','echarts/lib/component/title'],beauty: path.resolve(__dirname, 'src/js/beauty.js'),shadow: path.resolve(__dirname, 'src/js/shadow.js')},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js',},module: {rules: [{test: /\.html$/,loader: 'html-loader',},{test: /\.js$/,exclude: /(node_modules)/,loader: 'babel-loader',},{test: /\.less$/,use: [{loader: 'style-loader',}, {loader: 'css-loader',}, {loader: 'less-loader',}],},{test: /\.json$/,loader: 'file-loader',},{test: /\.(jpe?g|png|gif|svg)$/i,use: ['url-loader?limit=10000','img-loader',],},{test: /\.(webm|mp4)$/,loader: 'file-loader',},],},plugins: [new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery',_: 'lodash'}),new webpack.HotModuleReplacementPlugin(),new HtmlWebpackPlugin({filename: 'index.html',template: path.resolve(__dirname, 'src/beauty.html'),chunks: ['vendor', 'beauty'],}),new HtmlWebpackPlugin({filename: 'shadow.html',template: path.resolve(__dirname, 'src/shadow.html'),chunks: ['vendor', 'shadow'],})],performance: {hints: false},devtool: '#eval-source-map'
}module.exports = config

虽然只是小小的改动，但是提高了开发的效率，也是有点小强迫症，看着每次编译都要等个3秒真的是太难受了，不过webpack4.0肯定还是有很多的变化和更新等着去我们去探（踩）索（坑），不过踩的越多会的也就越多~

webpack4.0关闭开发环境的代码压缩UglifyJsPlugin相关推荐

c语言 vc++6.0集成开发环境的使用,VC6.0集成开发环境的使用.ppt
<VC6.0集成开发环境的使用.ppt>由会员分享,可在线阅读,更多相关<VC6.0集成开发环境的使用.ppt(11页珍藏版)>请在人人文库网上搜索. 1.VC6.0集成开发环 ...
转自：拜小白教你OpenCV3.2.0+VS2017开发环境配置
拜小白教你OpenCV3.2.0+VS2017开发环境配置本文转载自<拜小白教你OpenCV3.2.0+VS2017开发环境配置>.转载链接. https://blog.csdn.net ...
win7 64位系统 win CE6.0模拟器开发环境配置
win7 64位系统安装 win CE6.0模拟器开发环境配置 win7 64位系统安装 win CE60模拟器开发环境配置本章讲解需要的原料我们对win 7系统的构造都已经很熟悉了在这里不在赘述 ...
python软件包自带的集成开发环境-Python的10大集成开发环境和代码编辑器（指南）...
使用IDLE或者Python Shell来编写Python是非常适合于简单程序的,但是这些工具往往将大型的编程项目变成一个个充满绝望和沮丧的"坑".使用一款集成开发环境甚至是一款好 ...
python自带的集成开发环境是什么-Python的10大集成开发环境和代码编辑器（指南）...
使用IDLE或者Python Shell来编写Python是非常适合于简单程序的,但是这些工具往往将大型的编程项目变成一个个充满绝望和沮丧的"坑".使用一款集成开发环境甚至是一款好 ...
Eclipse搭建Android5.0应用开发环境 “ndk-build”:launchingfailed问题解决
Eclipse搭建Android5.0应用开发环境 "ndk-build":launchingfailed问题解决详细参考http://blog.csdn.net/loongem ...
入职开发很少写代码_如何简化开发人员入职：将开发环境作为代码
入职开发很少写代码 Imagine that only a decade ago system administrators deployed, configured, and maintained ...
Python的10大集成开发环境和代码编辑器（指南）
分享一篇文章,原文链接:Python IDEs and Code Editors (Guide). 使用IDLE或者Python Shell来编写Python是非常适合于简单程序的,但是这些工具往往将 ...
webpack4 搭建 Vue 开发环境笔记
一.node 知识 __dirname: 获取当前文件所在路径,等同于 path.dirname(__filename) console.log(__dirname); // Prints: /Use ...
php7.0 + mysql5.7.10 + nginx7.0 web开发环境搭建(CentOS7)
一.搭建nginx开发环境参考官方文档:http://nginx.org/en/linux_pac... 1.设置yum 官当提供了利用yum来安装.升级nginx的方法在/etc/yum.rep ...

webpack4.0关闭开发环境的代码压缩UglifyJsPlugin

webpack4.0关闭开发环境的代码压缩UglifyJsPlugin相关推荐

最新文章

热门文章