Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs

Posted _否极泰来_

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs相关的知识,希望对你有一定的参考价值。

Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs

  • Uglifyjs 插件,可以对 js 等文件进行压缩
  • 安装插件
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
  • 修改 webpack.config.js 文件

// 导入Node中path常量
const path = require("path");
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin")

module.exports = 
    entry: "./src/main.js",
    output: 
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        // publicPath: 'dist/'
    ,
    resolve: 
        // alias:别名
        alias: 
            'vue$': 'vue/dist/vue.esm.js'
        
    , module: 
        rules: [
            
                test: /\\.css$/,
                /**
                 * css-loader:只负责将css文件进行加载
                 * style-loader:负责将样式添加到DOM中
                 * 使用多个loader时,是从右向左
                 */
                use: ['style-loader', 'css-loader']
            ,
            
                test: /\\.vue$/,
                use: ['vue-loader']
            
        ]
    ,
    plugins: [
        new webpack.BannerPlugin("Copyright 2002-2021 the original author or authors.Licensed under the Apache License, Version 2.0 (the 'License');"),
        new HtmlWebpackPlugin(
            template: "index.html"
        ),
        new UglifyjsWebpackPlugin()
    ]

  • 验证 bunlde.js 是否压缩

    – 以上为《Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs》,如有不当之处请指出,我后续逐步完善更正,大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

以上是关于Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs的主要内容,如果未能解决你的问题,请参考以下文章

Vue 教程(三十四)webpack 之 BannerPlugin 插件

Vue 教程(三十五)webpack 之 HTML 插件

Vue 教程(三十五)webpack 之 HTML 插件

Vue 教程(三十二)webpack 使用 vue 配置步骤

Vue 教程(三十一)webpack-ES6 转 ES5 处理

Vue 教程(三十)webpack 图片文件处理