需求背景
JavaScript 是腳本語言, 沒有編譯過程, 直接以源碼就可以運(yùn)行. 有的時(shí)候, 出于安全或者其他的原因, 我們不希望別人直接讀到源碼, 或者很容易對源碼做出修改使用. 這個(gè)時(shí)候, 就需要對源碼進(jìn)行混淆壓縮處理. 經(jīng)過處理后的代碼體積變小, 不再可讀. 本篇介紹利用 webpack 打包工具來完成對后端代碼的混淆壓縮.
安裝配置 webpack
- 安裝
npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-stage-2 webpack -D
- 配置
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
})]);
}
- 配置說明
上面的 webpack 配置將會(huì)把 app.js 和它的依賴源碼混淆壓縮到一個(gè)文件app.min.js當(dāng)中.
通過 externals 屬性告訴 webpack 在打包的時(shí)候不要打包 node_modules 目錄下面的代碼, 也不要將程序的配置文件 cfg.js 一起打包, 因?yàn)?node_modules 目錄可以根據(jù) package.json 安裝生成, 而 cfg.js 是留給用戶自定義配置用的, 如果一起打包到 app.min.js 就不方便編輯了, 所以這兩項(xiàng)都排除了.
但是這里排除打包 cfg.js 有個(gè)問題需要解決. 我們只指定了對 cfg 字樣的模塊進(jìn)行排除, 也就是說, 在源碼里面, 凡是要引用 cfg.js 的地方, 我們都不能按照相對路徑來寫, 比如 require('./cfg.js'), 如果這樣寫, 那么 cfg.js 還是會(huì)打包到最終的文件里在. 正確的寫法是 require('cfg'). 這就要求把 NODE_PATH 指向當(dāng)前源碼的根目錄.
為了方便指定 NODE_PATH, 我們可以安裝 cross-env 組件
npm i cross-env -D
接下來, 如果你之前以 node app.js 這種方式運(yùn)行程序, 那么現(xiàn)在改為這樣 cross-env NODE_PATH=. node app.js
還有一個(gè)小問題, 我這里使用 vscode, 來做 JS 開發(fā) IDE, 當(dāng)以相對路徑引用庫文件的時(shí)候, vscode 能夠提供很好的編碼提示. 但是以指定 NODE_PATH 的方式引用文件時(shí), vscode 不能提示. 為了讓 vscode 知道 NODE_PATH 所在, 我們可以在源碼根目錄下新建一個(gè)配置文件來解決, jsconfig.json
{
"compilerOptions": {
"target": "ES6",
"baseUrl": "."
}
}
打包
cross-env NODE_ENV=production NODE_PATH=. webpack --progress --hide-modules
