实际开发中,在项目上线之前,我们编写的js代码是需要进行压缩的,我们可以采取压缩软件或者在线进行压缩,这不是我们的重点,在webpack中实现JS代码的压缩才是本节的核心。
通过webpack中可实现的JS代码压缩是通过插件的方式实现的----uglifyjs-webpack-plugin(JS压缩插件,简称uglify)。
注意:虽然uglifyjs是插件,但是webpack版本里默认已经集成,不需要再次安装。
1.使用uglify插件实现JS代码压缩
1.1 插件引入
首先需要在webpack.config.js中引入uglifyjs-webpack-plugin插件
const uglify = require('uglifyjs-webpack-plugin');
1.2 配置
引入后在plugins配置里new一个 uglify对象就可以了,代码如下:
plugins:[ new uglify() ],
1.3 打包
在webstorm的终端中使用webpack进行打包,得到压缩后的JS代码。
webpack
压缩后的代码格式:
这样就实现了JS代码的压缩。
扫描二维码关注公众号,回复:
4477322 查看本文章
注意:当我们想在终端中输入了npm run server进行预览,但发现终端中报错了,具体原因我们在下一节进行解析。。
目前webpack.config.js文件中的所有代码为:
const path = require('path'); const uglify = require('uglifyjs-webpack-plugin'); module.exports={ //入口文件的配置项 entry:{ entry:'./src/entry.js', //这里我们又引入了一个入口文件 entry2:'./src/entry2.js', }, //出口文件的配置项 output:{ //输出的路径,用了Node语法 path:path.resolve(__dirname,'dist'), //输出的文件名称 filename:'[name].js' }, //模块:例如解读CSS,图片如何转换,压缩 module:{ rules: [ { test:/\.css$/, use:['style-loader','css-loader'] } ] }, //插件,用于生产模版和各项功能 plugins:[ new uglify() ], //配置webpack开发服务功能 devServer:{ contentBase:path.resolve(__dirname,'dist'), //绝对路径 host:'localhost', compress:true, port:1818 } }