最好不要用什么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的断点功能