Demand background

JavaScript is a scripting language that can be run directly from source code without compilation. Sometimes, for security or other reasons, we don’t want people to read the source code directly or easily modify it. At this point, it is necessary to obfuscate the source code. The processed code becomes smaller and no longer readable. This article introduces the use of the WebPack packaging tool for obfuscating the compression of back-end code.

Install and configure webPack

  • The installation
npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-stage-2 webpack -D
Copy the code
  • configuration
const webpack = require('webpack');
const path = require('path');

function resolve(dir) {
    return path.resolve(__dirname, dir);
}

module.exports = {
    entry: {
        app: ['babel-polyfill', './app.js'],
    },
    target: 'node',
    output: {
        path: __dirname,
        filename: '[name].min.js'
    },
    resolve: {
        modules: [".", "node_modules"],
        extensions: ['.js'],
        alias: {
            "cfg": resolve("cfg.js")
        }
    },
    externals: function () {
        let manifest = require('./package.json');
        let dependencies = manifest.dependencies;
        let externals = {};
        for (let p in dependencies) {
            externals[p] = 'commonjs ' + p;
        }
        externals["cfg"] = "commonjs cfg";
        return externals;
    }(),
    node: {
        console: true,
        global: true,
        process: true,
        Buffer: true,
        __filename: true,
        __dirname: true,
        setImmediate: true
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
};

if (process.env.NODE_ENV === 'production') {
    module.exports.plugins = (module.exports.plugins || []).concat([new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        compress: false
    })]);
}
Copy the code
  • Configuration instructions

The webpack configuration above will compress app.js and its dependent source code into a file app.min.js.

The externals attribute tells webpack not to package the code in the node_modules directory, and not to package the program configuration file cfg.js. Since the node_modules directory can be generated from package.json installation and cfg.js is for user custom configuration, it would not be convenient to edit if packaged together in app.min.js, so these two items are excluded.

But there is a problem with excluding packaging cfg.js. We only specify the exclusion of CFG modules, that is, in the source code, any reference to cfg.js should not be written in a relative path, such as require(‘./cfg.js’). Then cfg.js will still be packaged into the final file. The correct format is require(‘ CFG ‘). This requires NODE_PATH to point to the root of the current source code.

To facilitate specifying NODE_PATH, we can install the cross-env component

npm i cross-env -D
Copy the code

Next, if you were running the application as node app.js, cross-env NODE_PATH=.node app.js instead

One small problem is that I’m using vscode for the JS IDE. Vscode provides good coding hints when referring to library files in relative paths. However, vscode does not prompt you to reference a file with the specified NODE_PATH. To let VScode know where NODE_PATH is, we can solve this problem by creating a new configuration file in the source root directory, jsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "baseUrl": "."
    }
}
Copy the code

packaging

cross-env NODE_ENV=production NODE_PATH=. webpack --progress --hide-modules
Copy the code