袜子技术支持深圳网站建设,做食物网站应该考虑些什么,wordpress图片链接到附件,网站建设相关资料整理的重要性npm
定义#xff1a;npm是Node.js标准的软件包管理器。它起初是作为下载和管理Node.js包依赖的方式#xff0c;但其现在也已成为前端JavaScript中使用的工具。
包
包#xff1a;将模块、代码、其他资料聚合成一个文件夹
包的分类#xff1a;
项目包#xff1a;主要用…npm
定义npm是Node.js标准的软件包管理器。它起初是作为下载和管理Node.js包依赖的方式但其现在也已成为前端JavaScript中使用的工具。
包
包将模块、代码、其他资料聚合成一个文件夹
包的分类
项目包主要用于编写项目和业务逻辑软件包封装工具和方法进行使用
要求根目录中必须有package.json文件记录包的清单信息
注意导入软件包时引入的默认时index.js模块文件 / main属性指定的模块文件 npm - 软件包管理器
使用
初始化清单文件npm init -y (得到package.json文件有则略过此命令)下载软件包npm i 软件包名称使用软件包 package-lock.json文件的作用是固定软件包版本。 npm - 安装所有依赖
项目中不含node_modules不能正常运行因为缺少依赖本地的软件包自己用npm下载依赖比磁盘传递拷贝快得多。项目终端输入命令npm i可以下载package.json中记录的所有软件包。
npm - 全局软件包nodemon
软件包区别
本地软件包当前项目内使用封装属性和方法存在于node_modules全局软件包本机所有项目使用封装命令和工具存在于系统设置的位置
nodemon作用替代node命令检测代码更改自动重启程序。
使用
安装npm i nodemon -g -g 代表安装到全局环境中运行nodemon 待执行的目标js文件
Webpack
定义一个用于现代JavaScript应用程序的静态模块打包工具。
静态模块指的是编写代码过程中的html、css、js、图片等固定内容的文件打包把静态模块内容压缩、整合、转译等前端工程化 把less / sass转成css代码把ES6降级成ES5支持多种模块标准语法
使用Webpack
需求封装utils包校验手机号长度和验证码长度在src/index.js中使用并打包观察。
步骤
新建并初始化项目编写业务源代码下载webpack webpack-cli到当前项目中版本独立并配置局部自定义命令运行打包命令自动产生dist分发文件夹压缩和优化后用于最终运行的代码
修改Webpack打包入口和出口
Webpack配置影响Webpack打包过程和结果。
步骤
项目根目录新建webpack.config.js配置导出配置对象配置入口、出口文件的路径重新打包观察
注意只有和入口产生直接/间接的引入关系才会被打包
自动生成html文件
插件html-webpack-plugin在Webpack打包时生成html文件。
步骤 下载html-webpack-plugin本地软件包 npm i html-webpack-plugin --save-dev 配置webpack.config.js让Webpack拥有插件功能 重新打包观察效果
打包CSS代码 注意Webpack默认只识别js代码 加载器css-loader解析css代码
加载器style-loader把解析后的css代码插入到DOM
步骤 准备css文件代码引入到src/login/index.js中压缩转译处理等 下载css-loader和style-loader本地软件包 npm i css-loader style-loader --save-dev 配置webpack.config.js让Webpack拥有该加载器功能 module.exports {module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},],},
};优化 - 提取css代码
插件mini-css-extract-plugin提取css代码。 好处css文件可以被浏览器缓存减少js文件体积 注意不能和style-loader一起使用需要Webpack5才能正常工作 步骤 下载mini-css-extract-plugin本地软件包npm install --save-dev mini-css-extract-plugin 配置webpack.config.js让Webpack拥有该插件功能 const MiniCssExtractPlugin require(mini-css-extract-plugin);module.exports {plugins: [new MiniCssExtractPlugin()],module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, css-loader],},],},
};打包后观察效果
const MiniCssExtractPlugin require(mini-css-extract-plugin);
module.exports {plugins: [new MiniCssExtractPlugin()],module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, css-loader],},],},
};优化 - 压缩过程
使用css-minimizer-webpack-plugin插件可以解决css代码提取后没有压缩的问题。
步骤 下载cs-minimizer-webpack-plugin本地软件包npm install css-minimizer-webpack-plugin --save-dev 配置webpack.config.js让webpack拥有该功能 const CssMinimizerPlugin require(css-minimizer-webpack-plugin);module.exports {optimization: {minimizer: [// 在 webpack5 中你可以使用 ... 语法来扩展现有的 minimizer即 terser-webpack-plugin将下一行取消注释保证js代码能被压缩处理// ...,new CssMinimizerPlugin(),],},plugins: [new MiniCssExtractPlugin()],
};打包重新观察
打包less代码
加载器less-loader把less代码编译位css代码。 注意less-loader需要配合less软件包使用如果既有css文件又有less文件需要关闭vscode里的easy less插件。 步骤 新建less代码设置背景图并引入到src/login/index.js中 下载less和less-loader本地软件包 npm i less less-loader --save-dev 配置webpack.config.js让webpack拥有功能 module.exports {module: {rules: [{test: /\.less$/i,use: [// compiles Less to CSSstyle-loader,css-loader,less-loader,],},],},
};打包图片
资源模块Webpack5内置资源模块字体、图片等打包无需额外loader。 注意判断临界值默认位8KB 大于8KB的文件发送一个单独的文件并导出URL地址小于8KB的文件导出一个data URIbase64字符串 步骤 配置webpack.config.js让Webpack拥有打包图片功能。 占位符 [hash] 对模块内容做算法计算得到映射的数字字母组合的字符串 占位符 [ext] 使用当前模块原本的占位符例如.png / .jpg 等字符串 占位符 [query] 保留引入文件时代码中的查询参数只有URL下生效
module.exports {module: {rules: [{test: /\.(png|jpg|gif)$/i,type: asset,generator: {filename: assets/[hash][ext][query]}},]},
}搭建开发环境
问题之前改代码需要重新打包才能运行查看效率很低。
开发环境配置webpack-dev-server快速开发应用程序。
作用启动Web服务自动检测代码变化热更新到网页。
注意dist目录和打包内容是在内存里更新快
步骤 下载webpack-dev-server软件包到当前项目 npm i webpack-dev-server --save-dev 设置模式位开发模式module.exports { mode: development }并配置自定义命令scripts: { build: webpack, dev: webpack serve --open} 使用npm run dev来启动开发服务器 注意 webpack-dev-server借助http模块创建8080默认Web服务默认以public文件夹作为服务器根目录webpack-dev-server根据配置 打包模式
打包模式告知Webpack使用相应模式的内置优化。
分类
模式名称模式名字特点场景开发模式development调试代码实时加载模块热替换等本地开发生产模式production压缩代码资源优化更轻量等打包上线
设置 方法1在webpack.config.js配置文件设置mode选项 module.exports {// ...mode: production
}方法2在package.json命令行设置mode参数 scripts: {build: webpack --modeproduction,dev: webpack serve --modedevelopment
},注意命令行设置的优先级高于配置文件的推荐命令行设置。
打包模式的应用
需求在开发模式下用style-loader内嵌更快在生产模式下提取css代码
方案一webpack.config.js配置导出函数但是局限性大只接受2种模式
方案二借助corss-env跨平台通用包命令设置参数区分环境 步骤 下载cross-env软件包到当前项目npm i cross-env --save-dev 配置自定义命令传入参数名和值会绑定到process.env对象下 scripts: {test: echo \Error: no test speckfied\ exit 1,build: cross-env webpack --modedevelopment,dev: cross-env NODE_ENVdevelogment webpack serve --open --modedevelopment
},在webpack.config.js区分不同环境使用不同配置 重新打包观察
方案3配置不同的webpack.config.js适用多种模式差异性较大情况
Webpack向前端注入环境变量
需求前端项目中开发模式下打印语句生效生产模式下打印语句失效。
问题cross-env设置的只在Node.js环境生效前端代码无法访问process.env.NODE_ENV
解决使用Webpack内置的DefinePlugin插件。
作用在编译时将前端代码中匹配的变量名替换为值或表达式。
开发环境调错 - source map
问题代码被压缩和混肴无法正确定位源代码位置行数和列数
source map可以准确追踪error和warning在原始代码的位置。
设置webpack.config.js配置devtool选项。
module.exports {devtool: inline-source-map
};inline-source-map选项把源码的位置信息一起打包在js文件内。
注意source map仅适用于开发环境不要在生产环境使用防止被轻易查看源代码位置
Webpack解析别名
解析别名配置模块如何解析创建import引入路径的别名来确保模块引入变得简单。
例如原来路径比较长而且相对路径不安全。
举例
配置前import {checkPhone, checkCode} from ../src/utils/check.js
配置webpack.config.js
const config {resolve: {alias:{: path.resolve(__dirname, src)}}
}配置后import {checkPhone, checkCode} from /utils/check.js
优化 - CDN使用
CDN定义内容分发网络指的是一组分布在各个地区的服务器。
作用把静态资源文件/第三方库放在CDN网络中各个服务器中共用户就近请求获取。
好处减轻自己服务器的请求压力就近请求物理延迟低配套缓存策略。
需求开发模式使用本地第三方库生产模式下使用CDN加载引入
步骤
在html中引入第三方库的CDN地址并用模板语法判断配置webpack.config.js中externals外部扩展选项防止某些import的包被打包两种模式下的打包观察效果
多页面打包
单页面单个html文件切换DOM的方式实现不同的业务逻辑展示后续Vue/React会学到
多页面多个html文件切换页面实现不同业务逻辑展示
步骤
准备源码html、css、js放入相应位置并改用模块化语法导出。下载form-serialize包并导入到核心代码中使用配置webpack.config.js多入口和多页面的设置重新打包观察效果
