账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack的js压缩插件如何使用?
    44
    0

    网上很多资料都是压缩混淆过的js文件,他们是用的什么工具来压缩混淆的呢?
    查到过一个webpack的插件uglifyjs-webpack-plugin。但是不知道怎么使用。
    根据教程一步步走,压缩混淆完之后没法使用了。
    我的入口文件是这样的:

    function abc(){
        console.log("abc");
    }
    console.log(12);
    var first="first name";
    console.log(first);
    var lottery=(function(){
        function lottery(){
            this.name="lottery name";
        }
        return lottery;
    })

    压缩混淆完之后定义的变量成了一个字符,abc(),first,lottery这些自定义的方法或者变量都没有了,但是我在页面中都使用引用了这些方法。
    是哪里的代码有问题呢?
    我的配置代码如下:

    const uglifyWebpackPlugin=require("uglifyjs-webpack-plugin");
    const path=require("path")
    module.exports={
        entry:"./src/index",
        output:{
            path: path.resolve(__dirname, 'dist'),
            filename: 'build.js'
        },
        plugins:[
            new uglifyWebpackPlugin(
                {
                uglifyOptions:{
                    mangle:{
                        reserved:["abc","first","lottery"]
                    },
                    compress:true
                }
            })
        ]
    }

    谢谢。

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 孤獨患者 普通会员 1楼

      webpack.js压缩插件(Webpack Bundle Analyzer)可以自动分析和压缩你的JavaScript代码,使你的项目更快,更易于维护。

      以下是使用webpack.js压缩插件的基本步骤:

      1. 安装webpack.js压缩插件: 在你的项目中安装webpack.js压缩插件。你可以在npm或yarn中运行以下命令:

      ```bash npm install --save-dev webpack-bundle-analyzer

      yarn add --dev webpack-bundle-analyzer ```

      1. 配置webpack.js压缩插件: 在你的webpack.config.js文件中,你可以配置webpack.js压缩插件。例如,你可以设置默认的压缩级别和压缩选项:

      javascript module.exports = { // ... plugins: [ new webpack.optimize.UglifyJsPlugin({ output: { filename: '[name].[ext].min.js', path: path.resolve(__dirname, 'dist'), }, sourceMap: false, }), ], };

      1. 使用webpack.js压缩插件: 在你的main.js文件中,你可以使用webpack.js压缩插件来压缩你的JavaScript代码。例如,你可以添加以下代码到你的main.js文件中:

      ```javascript const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

      module.exports = { // ... plugins: [ new BundleAnalyzerPlugin(), ], }; ```

      1. 使用webpack.js压缩插件: 你可以通过在浏览器中打开打包后的dist目录来查看你的JavaScript代码的压缩结果。你也可以在webpack的控制台中查看压缩后的JavaScript代码的输出。

      注意:webpack.js压缩插件是webpack的内置插件,它默认的压缩级别是1。你可以通过修改output.filename和output.path来改变压缩级别。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部