终于学完了以前自学时有点懵逼的地方，以前只知道npm能下载东西，却从来不知道npm和node到底是什么关系，而且当时还很反感命令行去下载，可能可视化用的多了就有这些毛病了。以前也只知道webpack是打包工具，但又很不理解为什么要这么多配置，这么麻烦，现在网上随随便便就有很多在线压缩的工具，却不知道webpack内部做了这么多功能，而且学了脚手架之后就发现原来打包也能开箱即用。

NodeJS与npm的概念

NodeJS并不是一门语言，它就是一个基于Chrome V8引擎的JavaScript运行环境，听说是有一位大佬将谷歌内部的js解析器也就是V8给单独拿出来使用了，这使得js代码可以脱离页面使用，进而实现后端的功能，比如说搭建Web服务?

既然脱离了文档使用，那么也就是说Window不再是JS的全局对象了，在Node中，内置了几个全局对象，其中global类似Window，require是导入，exports和module.exports一样是导出，module存储与当前模块相关的信息。

npm（node package manage）是 node的包管理器。别人发布的模块称之为包，模块也就是js文件，也就是说npm就是用来下载/删除/上传包的一个工具，具体流程如下

一般情况下只要命令输对了但是下载出现错误大概率是因为网络波动导致的丢包，多试几次就可以了，建议下载个nrm镜像管理工具，因为node的下载地址默认是国外，下载会很慢，使用nrm可以快速的切换想要的镜像源。

内置模块

为了能够实现后端的一些功能，Node给我们提供了很多内置模块，使用前需要导入，只需要写模块的名称即可，因为内置模块的路径是在node内部定义好的。

fs模块是用于文件操作的模块，path模块用于路径拼接，内部比较智能，能够根据系统自动转换对应的路径拼接符，http模块能够快速搭建web服务器，基础代码如下

<script>
const http = require('http')

const server = http.createServer()

server.on('request', (request, response)=>{
let url = request.url
// 中文乱码
response.setHeader('content-type', 'text/html;charset=utf-8')
if(url === '/' || url === '/index.html'){
  response.end('<h1>首页</h1>')
}else if(url === '/about.html'){
  response.end('<h1>关于</h1>')
}else{
  response.statusCode = 404
  response.end('<h1>404 not found</h1>')
}
})

server.listen(4201, ()=>{
console.log('server is running ...');
})
</script>

有了上述代码就可以实现一个简易的web服务器了，尽管node能够实现这么多后端的事情，但没什么人使用node开发后台，因为就目前来看，很多后端语言都已经经过了很多年的沉淀，地位并不是那么容易撼动的，所以一般前端人员也只是将node作为一个辅助前端的开发工具。

同源，跨域与同源策略

同源即协议，主机名，端口号三个都相同的地址，跨域是双方只要其中有一个不满足条件的请求称之为跨域，同源策略就是浏览器的安全机制，不允许跨域进行资源访问，能发出请求，但响应会被浏览器会拦截。

解决方式CORS

如果想对某个跨域的请求放行就将URL添加到 Access-Control-Allow-Origin 响应头里即可，*代表全部允许，浏览器就是根据这个响应头进行判断是否拦截的。

webpack的使用

webpack就是一个前端的打包工具，非常的实用，能够进行代码压缩，能够对高阶版本JS进行低阶转换，还能将各种文件模块化，合并成一个文件减少请求，虽然配置起来很麻烦，以至于我都忘记的差不多了，所以，以下内容看着图一乐即可。

webpack默认是只能进行js的模块打包压缩的，但也不是不能对其他文件进行处理，只需要下载并配置相应的loader插件即可，比如css-loader,less-loader,图片相对来说比较特殊，在webpack5中就已经内置了图片的处理功能了，只需要配置合适的功能即可。

一个简易的配置如下

module: {
    // 由于可以加载多种文件，每种文件对应一种loader，所以是数组
    rules: [
        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.less$/i,
            use: [
                "style-loader",
                "css-loader",
                "less-loader"
            ]
        },
        {
            test: /\.(png|jpg|jpeg|gif|svg)$/,
            type: 'asset/resource'
        },
        {
            test: /\.(eot|ttf|otf|woff2)$/,
            type: 'asset'
        }
    ]
}

关于source map的使用

webpack中有一个文件容易被忽略，那就是source map文件，这个其实就是一个定位错误的文件，因为我们打开的是打包后的代码进行调试，所以如果出现bug报错的地方是打包后的文件位置，但我们需要修改的是源文件的代码，这时候就可以使用source map进行错误位置的定位了。

注意: 只是开发阶段使用，上线一定要移除

最后

其实webpack中还讲了很多配置项，比如热更新，打包模式等等，因为太多了讲不完所以这里也就不过多赘述啦，官方文档就是最好的学习资源，这里只是作为我回顾一下之前学过的笔记使用，感谢你能观看到这里，如果能帮助到你那当然是最好的啦。