(6/24) 插件配置:轻松配置JS文件压缩

实际开发中,在项目上线之前,我们编写的js代码是需要进行压缩的,我们可以采取压缩软件或者在线进行压缩,这不是我们的重点,在webpack中实现JS代码的压缩才是本节的核心。
通过webpack中可实现的JS代码压缩是通过插件的方式实现的----uglifyjs-webpack-plugin(JS压缩插件,简称uglify)。
注意:虽然uglifyjs是插件,但是webpack版本里默认已经集成,不需要再次安装。

1.使用uglify插件实现JS代码压缩

步骤.png

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

压缩后的代码格式:


格式.png

这样就实现了JS代码的压缩。
注意:当我们想在终端中输入了npm run server进行预览,但发现终端中报错了:

要弄明白这个问题,我们先要弄清楚什么是开发环境,什么是生产环境。开发环境中是基本不会对js进行压缩的,由于在开发预览时我们需要明确的报错行数和错误信息,所以完全没有必要压缩JavasScript代码。而生产环境中才会压缩JS代码,用于加快程序的工作效率。devServer用于开发环境,而压缩JS用于生产环境,在开发环境中作生产环境的事情所以webpack设置了冲突报错。
在实际开发中,webpack配置文件是分开的,开发环境、生产环境各自一个文件。

目前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
    }
}

你可能感兴趣的:((6/24) 插件配置:轻松配置JS文件压缩)