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的断点功能