webpack压缩静态js文件或第三方js文件

vue.config.js

vue项目里面某些时候需要用到第三方插件的js，像element-ui，或者axios本身可以以依赖包的的方式通过 npm 安装, 但是某些场景下如果第三方插件不能通过npm安装的时候，第三方的js又未做压缩，那这些时候需要对代码进行压缩提升安全性的时候，要如何压缩js代码呢？

其实vue项目本身支持对第三方js文件进行压缩的，主要通过copy-webpack-plugin插件进行处理，在vue.config.js文件中做一些配置就可以实现，具体操作如下：

1.首先将需要压缩的js文件将到src下的资源目录，比如：src/assets/js

2.在vue-config.js文件中添加configureWebpack配置。

以下vue.config.js配置供参考：

// vue.config.js

const UglifyJS = require('uglify-es'); // 如果未安装需提前安装npm i uglify-es

const CopyWebpackPlugin = require('copy-webpack-plugin'); // 如果未安装需提前安装npm i copy-webpack-plugin

let path = require('path')

function resolve (dir) {

  return path.join(__dirname, dir);

}

module.exports = {

  // 部署应用包时的基本 URL

  publicPath: './',

  // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。

  outputDir: 'dist',

  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录

  assetsDir: 'static',

  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

  indexPath: 'index.html',

  // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。

  filenameHashing: true,

  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。 Type: boolean | 'warning' | 'default' | 'error'

  lintOnSave: 'default',

  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建

  productionSourceMap: false,

  // css配置

  css: {

    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能

    sourceMap: false

  },

  devServer: {

    // 服务端口

    port: 7910,

    // 代理地址

    // proxy: {

    // '/api': {

    //   target: '<url>',

    //   changeOrigin: true

    // }

    // }

  },

  configureWebpack: config => {

    config.plugins.push(

      new CopyWebpackPlugin([

        {

          from: resolve('src/assets/js'),

          to: 'js',

          transform: function (content) {

            return UglifyJS.minify(content.toString()).code;

          }

        }

      ])

    );

  }

}

本文章由javascript技术分享原创和收集