webpack打包nodejs後端環境

webpack好多樣例都是用在前端的,百度也很難找到一個像樣的後端打包教程,自己從谷歌還有webpack官方文檔總結一下吧。

入門

首先準備了一個main.js這個入口文件

import request from './request'
import cherrio from './query'

request('https://www.baidu.com/s?ie=UTF-8&wd=axios').then(res=>{
    var $ = cherrio(res)
    var rs = $([
        {
            test:'.c-container',
            attr:'srcid'
        }
    ])
    console.log(JSON.stringify(rs))
})

上面的代碼只是個簡單的爬蟲balabala的,其中用了nodejs環境暫不支持的es6 import關鍵字。

然後我們在使用webpack api寫一個webpack.js的webpack配置文件

var webpack = require('webpack')
webpack({
    mode: "development",
    entry: './main.js',
    output: {
        filename: 'bundle.js',
        path: __dirname
    },
    target: 'node' // 這是最關鍵的
}, (err, stats) => {
    if (err) {
        console.log('err:', err)
    }
})

其中的target配置項是打包的目標環境,默認爲瀏覽器環境,加了這個就可以直接打包nodejs環境的js了

壓縮優化

但是這個並沒有結束,打包出來的bundle.js變得非常大,即使自己的全部js文件都非常的小
在這裏插入圖片描述
這時就需要用到webpack的externals

簡單概括

這個externals配置項原本就是爲了前端CDN引入js,優化bundle.js的大小,比如

webpack({
    //...
    externals:{
        axios:"axios"
    }
}

在打包出的bundle.js中的axios模塊就只有這麼點,沒有將axios模塊全部引進去,其中的axios爲全局中的axios,就實現了CDN引入js的作用
在這裏插入圖片描述

實際運用

官方在externas配置項是有推薦webpack-node-externals這個插件的,但實際使用並沒有效果,打包出來的大小還是1.46MB,也查不出什麼問題

利用簡單概括的特性自己寫了一段js

var package = require('package.json'),
	webpack = require('webpack')

var externals = {},
    pends = Object.assign(package.dependencies,package.devDependencies)
for(let i in pends){
    externals[i] = `require('${i}')`
}
webpack({
    //...
    externals
}

就能很明顯的看到bundle.js變得超級小了
在這裏插入圖片描述

debugger

需要dubgger的話需要使用devtools配置項

webpack({
	//...
    mode: "development",
    target: 'node',
    devtool: 'source-map'
})

然後在vscode中,推薦這一個配置就可以在定位這個bundle.js文件就可以debugger了

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "node 文件",
            "program": "${file}",
            "skipFiles": [
                "<node_internals>/**"
            ],
        }
     ]
}

唯一不足的是,目前沒有找到vscode + sourcemap使用原生的斷點功能debugger,目前的解決方法有兩個

1.在代碼中添加debugger
2.運行到debugger處時使用vscode的斷點,下次再debugger時會保留這些斷點


2020-5-24 12:14 更新,終於找到了vscode怎麼使用原生斷點功能了

由於我的webpack打包的bundle.js放在子目錄utils中,vscode的配置爲

{
       "type": "node",
       "request": "launch",
       "name": "webpack後端測試",
       "program": "${workspaceFolder}/utils/bundle.js",
       "sourceMapPathOverrides": {
           "webpack:///./~/*": "${workspaceRoot}/node_modules/*",
           "webpack:///./*": "${workspaceRoot}/utils/*",
           "webpack:///*": "*"
       }
}

sourceMapPathOverrides中的webpack:///./*爲關鍵配置項,加上bundle.js所在的目錄即可實現使用vscode的斷點功能

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章