08-JS压缩(Plugin插件)

压缩JS代码：

现在你写的JS代码，在上线之前，都是需要进行压缩的，在没有webpack和gulp这些工具前，你可能需要找一个压缩软件或者在线进行压缩，在Webpack中可以很轻松的实现JS代码的压缩，它是通过插件的方式实现的，这里我们就先来引入一个uglifyjs-webpack-plugin(JS压缩插件，简称uglify)。 注意：虽然uglifyjs是插件，但是webpack版本里默认已经集成，不需要再次安装。

引入：

我们需要在webpack.config.js中引入uglifyjs-webpack-glugin插件 const uglify = require("uglifyjs-webpack-plugin") 引入后在plugins配置里new一个 uglify对象就可以了，代码如下。

插件

插件,用于生产模板,和各项功能

    plugins: [new uglify()]

这时候在终端中使用webpack进行打包，你会发现JS代码已经被压缩了。如果你用的VSCode的话，可以按Alt+Z让他文件自动换行，查看效果。

完整的配置

const path = require("path")
const uglify = require("uglifyjs-webpack-plugin")
module.exports = {
    // 入口
    entry: "./src/entery.js",
    // 出口
    output: {
        // 打包文件的路径
        path: path.resolve(__dirname, "./dist"),
        // 打包文件的名字,修改 //输出的文件名称 
        //[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
        filename: "entery.js"
    },
    // 模块,例如,解读CSS,图片如何转换,压缩
    module: {
        rules: [
            {
                test: /\.css$/,
                // 第一种写法
                // use: ["style-loader", "css-loader"],
                // // 第二种写法
                // loader: ["style-loader", "css-loader"],
                // 第三种写法
                use: [{
                    loader: "style-loader",
                }, {
                    loader: "css-loader"
                }]
            }
        ]
    },
    // 插件,用于生产模板,和各项功能
    plugins: [new uglify()],
    // 配置webpack开发服务功能
    devServer: {
        //设置基本目录结构
        contentBase: path.resolve(__dirname, 'dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host: 'localhost',
        //服务端压缩是否开启
        compress: true,
        //配置服务端口号
        port: 2019
    }
}