柚子快报激活码778899分享：webpack node
node.js+webpack
一、fs模块读写文件
const fs = require('fs') // 引入fs对象
fs.writeFile("./test.txt", "hello Node.js", err => { // 写文件
if(err) console.log(err)
else console.log("写入成功")
})
fs.readFile("./test.txt", (err,data) => { // 读文件
if(err) console.log(err)
else console.log(data.toString())
})
二、path模块和__dirname
/ path.join()合并路径
// __dirname获取文件路径
const fs = require('fs')
const path = require('path')
console.log(__dirname)
fs.readFile(path.join(__dirname, "../test.txt"), (err, data) => { // 使用绝对路径
if(err) console.log(err)
else console.log(data.toString())
})
三、http模块创建Web服务
端口号用于标记服务器里不同功能的服务程序
端口号范围：0-65536之间的整数http协议默认访问80端口
// 示例：基于http模块创建Web服务程序
const http = require('http') // 加载http模块，创建Web服务对象
const server = http.createServer()
server.on('request', (req, res) => { // 监听request请求事件，设置响应头和响应体
// 设置响应头：内容类型、普通文本、中文编码格式
res.setHeader('Content-Type','text/plain;charset=utf-8')
res.end("欢迎使用Node.js")
})
server.listen(3001, () => { // 配置端口号并启动Web服务
console.log("Web服务启动成功");
})
四、CommonJS模块和ECMAScript模块实现模块化
CommonJS模块
导出：module.exports = {}
导入：require(‘模块名或路径’)(导入node.js内置模块用模块名，导入自定义模块用路径)
示例：
// util.js文件代码
const baseURL = 'https://www.baidu.com';
const getSum = arr => arr.reduce((sum,item) => sum += item, 0);
module.exports = {
url : baseURL,
arrSum : getSum
};
// index.js文件代码
const util = require('./util.js');
console.log(util.url);
console.log(util.arrSum([10,20,40]));
ECMAScript模块默认导出
由于node.js默认支持CommonJS标准语法，因此使用ECMAScript时需要在运行模块所在文件夹新建package.json文件，并设置{“type”:“module”}
导出：export default = {}
导入：import 变量名 from ‘模块名或路径’ (导入node.js内置模块用模块名，导入自定义模块用路径)
示例：
// util.js文件代码
const baseURL = 'https://www.baidu.com';
const getSum = arr => arr.reduce((sum,item) => sum += item, 0);
export default {
url : baseURL,
arrSum : getSum
};
// index.js文件代码
import ut from './util.js';
console.log(ut.url);
console.log(ut.arrSum([10,20,40]));
ECMAScript模块命名导出
导出：export 修饰定义语句
导入：import {变量名1,变量名2} from ‘模块名或路径’ (导入node.js内置模块用模块名，导入自定义模块用路径)
示例：
// util.js文件代码
export const baseURL = 'https://www.baidu.com';
export const getSum = arr => arr.reduce((sum,item) => sum += item, 0);
// index.js文件代码
import { baseURL,getSum } from "./util.js"; // 必须同名
console.log(baseURL);
console.log(getSum([10,20,40]));
按需加载，使用命名方式全部加载，使用默认方式
五、包的概念
包：将模块、代码、其他资料聚合成一个文件夹
包分类：
项目包–>主要用于编写项目和业务逻辑软件包–>封装工具和方法进行使用
note：包的根目录中，必须要有package.json文件(用于记录清单信息)
{
"name": "06", // 软件包名称
"version": "1.0.0", // 软件包当前版本
"description": "", // 描述包的功能
"main": "index.js", // 软件包的入口点
"author": "WXR", // 软件包作者
"license": "ISC" // 软件包许可证
}
5.1 npm软件包管理
npm是Node.js标准的软件包管理器。
使用步骤：
初始化清单文件 npm init -y (得到package.json文件)下载软件包 npm i 软件包名
5.2 npm安装所有依赖
npm i // 安装依赖
5.3 npm全局软件包nodemon
软件包区别：
本地软件包：当前项目内使用，封装属性和方法，存在于node_modules全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置
nodemon作用：替代node命令，检测代码更改，自动重启程序
安装命令：npm i nodemon -g (-g代表安装到全局环境)
六、Webpack
定义：webpack是一个用于现代JavaScript应用程序的静态模块打包工具。
6.1 webpack使用步骤
新建并初始化项目，编写业务源代码下载webpack webpack-cli到当前项目中(版本独立)，并配置局部自定义命令
npm i webpack webpack-cli --save-dev命令用于下载模块在package.json文件中的"scripts"对象内添加自定义命令**“build”:“webpack”** 运行打包命令npm run build，自动产生dist分发文件夹(里面为压缩优化后，可直接执行的代码
6.2 修改webpack入口和出口
步骤：
在项目根目录新建webpack.config.js配置文件导出配置对象，配置入口、出口文件路径
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src/login/index.js'), // 入口
output: {
path: path.resolve(__dirname, 'dist/login'), // 出口
filename: 'index.js',
clean : true // 清空出口文件内的内容
},
};
然后运行打包命令npm run build，重新打包
6.3 自动生成html文件
步骤：
将模板文件放到public/index.html文件中 下载html-webpack-plugin本地软件包(命令：npm install --save-dev html-webpack-plugin) 配置webpack.config.js让Webpack拥有插件功能
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins : [ // 插件
new HtmlWebpackPlugin({
template : path.resolve(__dirname, 'public/index.html'), // 模板文件
filename : path.resolve(__dirname, 'dist/login/index.html') // 输出文件
})
]
};
然后运行打包命令npm run build，重新打包
6.4 打包css代码
note：Webpack默认只识别js代码
步骤：
准备css文件代码，将其引入到src/login/index.js中(引入语法：import ‘index.js’)下载scc-loader和style-loader本地软件包(命令：npm install --save-dev css-loader style-loader)配置webpack.config.js让Webpack拥有加载器功能
module.exports = {
module: {
rules: [
{
test: /\.css$/i, // 匹配后缀为.css的文件，不区分大小写
use: ["style-loader", "css-loader"], // 从后往前匹配css、style
},
],
},
};
然后运行打包命令npm run build，重新打包
6.5 提取css代码
将css文件提取到单独的文件中，可以让css文件被浏览器缓存，减少js文件体积
步骤：
下载mini-css-extract-plugin本地软件包(命令：npm install --save-dev mini-css-extract-plugin)配置webpack.config.js让Webpack拥有提取css代码的插件功能
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins : [ // 插件
new MiniCssExtractPlugin(),
],
module: {
rules: [
{
test: /\.css$/i, // 匹配后缀为.css的文件，不区分大小写
use: [MiniCssExtractPlugin.loader, "css-loader"], // 从后往前匹配
},
],
},
};
然后运行打包命令npm run build，重新打包
note：不能和style-loader一起使用
6.6 压缩css代码
步骤：
下载css-minimizer-webpack-plugin本地软件包(命令：npm install --save-dev css-minimizer-webpack-plugin)配置webpack.config.js让Webpack拥有压缩css代码的插件功能
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
plugins : [ // 插件
new MiniCssExtractPlugin(),
],
module: {
rules: [
{
test: /\.css$/i, // 匹配后缀为.css的文件，不区分大小写
use: [MiniCssExtractPlugin.loader, "css-loader"], // 从后往前匹配
},
],
},
optimization: { // 压缩js或css代码在此处配置
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
`...`,
new CssMinimizerPlugin(),
],
},
};
最后运行打包命令npm run build，重新打包
6.7 打包less代码
less-loader需要配合less软件包使用
步骤：
新建less代码并引入到src/login/index.js中(import ‘./index.less’)下载less和less-loader本地软件包(命令：npm install less less-loader --save-dev)配置webpack.config.js让Webpack拥有打包less代码的功能
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
plugins : [ // 插件
new MiniCssExtractPlugin(),
],
module: {
rules: [
{
test: /\.css$/i, // 匹配后缀为.css的文件，不区分大小写
use: [MiniCssExtractPlugin.loader, "css-loader"], // 从后往前匹配
},
{
test: /\.less$/i, // 打包less代码
use: [
// compiles Less to CSS
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
},
],
},
optimization: { // 压缩js或css代码在此处配置
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
`...`,
new CssMinimizerPlugin(),
],
},
};
最后运行打包命令npm run build，重新打包
6.8 打包图片
资源模块 Webpack5 内置资源模块(字体、图片等)打包，无需额外的loader
步骤：
配置webpack.config.js让Webpack拥有打包less图片的功能
占位符 [hash] 对模块内容做算法计算，得到映射的数字字母组合的字符串占位符[ext]使用当前模块原本后缀的占位符，例如.png/.jpg等字符串占位符[query] 保留引入文件时代码中查询参数(只有URL下生效)
module: {
rules: [
{
test: /\.(png|jpg|jpeg|gif)$/i, // 匹配后缀为png|jpg|jpeg|gif的文件
type: 'asset', // 判断临界值默认为8KB，大于8KB的文件，发送一个单独的文件并导出URL地址；小于8KB的文件，导出一个data URI(base64字符串)
generator: {
filename: 'assets/[hash][ext][query]' // 配置输出文件的格式
}
}
],
},
最后运行打包命令npm run build，重新打包
6.9 搭建开发环境
开发环境：配置webpack-dev-server快速开发应用程序
作用： 启动Web服务，自动检测代码变化，热更新到网页(dist目录和打包是在内存里)
步骤：
下载webpack-dev-server软件包到当前项目(命令：npm install --save-dev webpack-dev-server)设置开发模式，并配置自定义命令
// 设置webpack.config.js中的mode为开发模式
module.exports = {
// ...
mode : 'development',
};
// 在package.json中设置自定义命令
"scripts": {
"dev": "webpack serve --open"
},
使用npm run dev来启动开发服务器
note： 默认以public文件夹作为服务器根目录；并且也会将output.path中的内容放到这个根目录中(只在内存中)
6.10 打包模式
打包模式：告知webpack使用相应模式的内置优化
分类：
模式名称模式名称特点场景开发模式development调试代码，实时加载，模块热替换等本地开发生产模式production压缩代码，资源优化，更轻量打包上线
两种设置方式(命令行设置的优先级更高)：
// 1、在webpack.config.js配置文件设置mode选项
module.exports = {
// ...
mode : 'development/production',
};
// 2、在package.json命令行设置mode参数
"scripts": {
"build" : "webpack --mode=production",
"dev": "webpack serve --open --mode=development"
},
6.11 打包模式的应用
实现在开发模式下用style-loader，在生产模式下提取css代码
方案一：在webpack.config.js中配置导出函数，但是局限性大(只接受两种模式)
方案二：借助cross-env(跨平台通用)包命令，设置参数区分环境
步骤：
下载cross-env软件包到当前项目配置package.json中自定义命令，传入参数名和值，在webpack.config.js区分不同环境使用配置
// 1、在webpack.config.js配置文件设置mode选项
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/i, // 匹配后缀为.css的文件，不区分大小写
use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,"css-loader"], // 从后往前匹配
},
{
test: /\.less$/i,
use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'],
},
],
},
};
// 2、在package.json命令行设置mode参数
"scripts": {
"build": "cross-env NODE_ENV=production webpack --mode=production",
"dev": "cross-env NODE_ENV=development webpack serve --mode=development --open"
},
重新打包观察变化
方案三：配置不同的webpack.config.js(适用于多种模式差异性较大的情况)
6.12 注入环境变量
实现在开发模式下打印语句生效，生产模式下打印语句生效
问题：cross-env设置的变量只在Node.js环境变量中有效，前端代码无法访问process.env.NODE_ENV
使用Webpack内置的DefinPlugin插件(在编译时，将前端代码中匹配的变量名，替换为值或表达式)
// 1、在webpack.config.js配置文件设置plugins选项
const webpack = require("webpack");
config = {
plugins : [ // 插件
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
],
};
module.exports = config
6.13 开发环境调错-source-map
问题： 代码被压缩和混淆，无法正确确定源代码位置(行数和列数)
source map：可以准确追踪error和warning在原始代码的位置(仅适用于开发环境，不要在生产环境使用)
设置webpack.config.js配置devtool选项
module.exports = {
// ...
devtool : 'inline-source-map' // 将源代码位置信息一起打包在js文件内
}
6.14 解析别名 alias
解析别名：配置模块使import引入模块更简单
在webpack.config.js中配置解析别名@来表示src绝对路径
module.exports = {
// ...
resolve : {
alias : {
'@' : path.resolve(__dirname, 'src')
}
}
}
6.15 优化-CDN的使用
使用CDN的作用：把静态文件/第三方库放在CDN网络中各个服务器中，供用户就近请求获取
需求：实现开发模式使用本地第三方库，生产模式下使用CDN加载引入
步骤：
在html中引入第三方库的CDN地址，并用模板语法判断
<%if(htmlWebpackPlugin.options.useCdn){ %>
<%}%>
在webpack.config.js中[externals]外部扩展选项(防止某些import的包被打包)
const config = {
// ...
plugins:[
new HtmlWebpackPlugin({
// ...
// 自定义属性，在html模版<%if(htmlWebpackPlugin.options.useCdn){ %>使用
useCdn : process.env.NODE_ENV === 'production',
})
]
}
if(process.env.NODE_ENV === 'production')
{
// key : 代码中import from 后面的模块标识符字符串
// value : 替换在原地的变量名
config.externals = {
'bootstrap/dist/css/bootstrap.min.css' : 'bootstrap',
'axios' : 'axios',
}
}
柚子快报激活码778899分享：webpack node
精彩链接
发表评论