Webpack

安装Nodejs-v16.19.0

cmd窗口验证:node -v

 

 

什么是模块化？

每个文件都被视为单独的模块，提升代码复用性，按需加载，比如fs，http以及自定义utils.js

//引入内置http模块
const http = require('http')
const server = http.createServer()
server.on('request',(req,res)=>{
    res.setHeader('Content-Type','text/plain;charset=utf-8')
    //设置响应体
    res.end('hello,nodejs')
})
//启动并监听端口
server.listen(8080,()=>{
    console.log('Web服务启动成功')
})

在当前路径下运行node server.js，浏览器访问 127.0.0.1:8080  就可以看到响应体了。

如何自定义模块？

在同级目录创建utils.js和index.js

• commonjs 导出导入写法：

const baseURL = '/api'
const getSum = arr => arr.reduce((sum,item)=>sum+=item,0)

//导出
module.exports = {
    url: baseURL,
    arraySum: getSum
}

　　在index.js通过路径进行导入

//引入utils模块
const utils = require('./utils.js')
console.log(utils.url)
console.log(utils.arraySum([1,2,3]))

 

• ECMAScript 导出导入写法： 

          需要在模块所在文件夹新建package.json，并设置{"type":"module"}

     

const baseURL = '/api'
const getSum = arr => arr.reduce((sum,item)=>sum+=item,0)

//导出
export default {
    url: baseURL,
    arraySum: getSum
}

//引入utils模块
import utils  from './utils.js'
console.log(utils.url)
console.log(utils.arraySum([1,2,3]))

 或者

export const baseURL = '/api'
export const getSum = arr => arr.reduce((sum,item)=>sum+=item,0)

//引入utils模块
import {baseURL,getSum}  from './utils.js'
console.log(baseURL)
console.log(getSum([1,2,3]))

 

什么是包？

将模块，其他资料聚合成的文件夹

 

arr.js

export const getSum = arr => arr.reduce((sum,item)=>sum+=item,0)

str.js

export const  checkUserName = username=>username.length>=8

index.js

import {getSum}  from './arr.js'
import {checkUserName}  from './str.js'

//统一导出所有函数
module.exports = {
    getSum,checkUserName
}

在使用的js中直接导入包
//引入utils模块
const utils = require('./utils')

 

什么是Webpack?

静态模块打包工具，把静态模块内容(html/css/js/图片等) 压缩，整合；例如 把less/sass转成css代码,把es6+降级成es5 等

1.下载webpack到当前项目中
npm i webpack webpack-cli --save-dev

2.在package.json配置
"srcipts":{
   "build": "webpack"
}
3.运行打包命令，生成dist文件夹
npm run build

css-loader:解析css代码

style-loader:把解析后的css代码插入到DOM

 

 别名的配置