如何丑化文件并保存到另一个位置（vue.js）

Posted 2023-02-22

【中文标题】如何丑化文件并保存到另一个位置（vue.js）

【英文标题】：how to uglify a file and save to another location (vue.js)

【发布时间】：2018-09-21 23:43:31

【问题描述】：

我不确定如何丑化我的server.js 文件并将其保存到server 文件夹下的dist 文件夹中。现在我只是在使用CopyWebpackPlugin

new CopyWebpackPlugin([
  
    from: path.resolve(__dirname, '../static'),
    to: config.build.assetsSubDirectory,
    ignore: ['.*']
  ,
  
    from: path.resolve(__dirname, '../src/server'),
    to: config.build.assetsServerDirectory,
    ignore: ['*.sql']
  
]),

这可行，但只是简单的复制和粘贴。

【参考方案1】：

你可以使用uglify-es + copy-webpack-plugin's transform():

安装包：

npm install uglify-es --save-dev

将其添加到您的来源：

const UglifyJS = require("uglify-es");                  // add the require

new CopyWebpackPlugin([
  
    from: path.resolve(__dirname, '../static'),
    to: config.build.assetsSubDirectory,
    ignore: ['.*']
  ,
  
    from: path.resolve(__dirname, '../src/server'),
    to: config.build.assetsServerDirectory,
    transform: function (content, path)                // add transform()
      return UglifyJS.minify(content.toString()).code;  // use uglify
    ,                                                  // (no args = mangle+compress)
    ignore: ['*.sql']
  
]),

注意：UglifyJS.minify(content.toString()).code 与 UglifyJS.minify(content.toString('utf8')).code 相同。 There are options in case of different encodings.

【讨论】：

我在尝试ERROR in Data must be a string or a buffer时猜到了错误

啊，好吧，必须修复返回到return UglifyJS.minify(content.toString()).code;。查看更新的答案。

成功了，谢谢。知道为什么 uglify-js 包不起作用吗？对奇怪的英语感到抱歉。

uglify-js 用于 ES 到 5。从 ES6（ES2015）及更高版本，它是 uglify-es。你可能有 let 或箭头函数之类的东西。

啊，是的，那是有道理的。再次感谢。

【参考方案2】：

已经有一个图书馆为此做好了准备。您可以使用 uglifyjs-webpack-plugin

然后将捆绑的文件输出到你想要的目录

如果您不喜欢使用该插件。你可以使用 Webpack 的默认 uglifier。

const webpack = require("webpack");

    module.exports = 
      entry: 
        "bundle": "./server/server.js",
      
      output: 
        path: "./dist",
        filename: "[name].js"
      ,
      plugins: [
        new webpack.optimize.UglifyJsPlugin(
          include: /\.js$/,
          minimize: true
        )
      ]
    ;

【讨论】：

不要认为这行得通，因为我已经有一个 entry 和 webpack-merge 参与其中。