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的斷點功能