搜索到
3
篇与
的结果
-
webpack5.x+React18搭建移动端项目 webpack5.x+React18搭建移动端项目项目仓库地址 https://github.com/MarvenGong/webpack5-react18-ts-basic在项目开发中，每开始一个新项目我都是使用现有的脚手架，这非常便于快速地启动一个新项目，而且通用的脚手架通常考虑地更加全面，也有利于项目的稳定开发；不过对于一个小项目，根据需求自己搭建可能会更好，一方面小项目不需要脚手架那么丰富的功能，另一方面可以提高对项目的掌控度以方便后期的扩展本项目基于公司内一个移动端项目搭建，旨在搭建一个快速，高效，灵活的前端开发环境。项目中使用了最新版本的webpack构建工具，最新版本的react前段框架和react-router6.x特性搭建，通过本项目，可以可以熟悉和巩固以下基础技能webpack5构建原理和基本配置，以及打包性能的提升和使用方法react18的feature，如，根组件的创建方式等const root = createRoot(document.getElementById('root') as Element); root.render(<RouterProvider router={router} />);react-router6 的新特性和单文件路由的使用方式wecpack5 中配置移动端响应式方案 rem布局的方法其他webpack插件和loader的使用项目仓库地址 https://github.com/MarvenGong/webpack5-react18-ts-basic接下来，详细说明项目中的各个配置环境webpack5的一个重要特性，会根据配置的mode属性是develop还是production来判断是否需要开启构建优化，这个优化过程是指对构建产品的优化，如js uglify,压缩，tree-shaking 等等，所以，我们的开发环境，是可以不用用到那些优化操作的，那么就需要把mode指定成 develop 这样可以在我们保存代码后，获得更快的热更新速度，我这里为了简单，直接在npm script中制定env，在webpack.js中使用package.json 中的scripts"scripts": { "serve": "cross-env NODE_ENV=development webpack serve --config webpack.config.js", "dev": "npm run serve", },PS: 切忌在NODE_ENV=development顺手写上&&写上了就设置不上了webpack.config.js 中使用环境变量const isDev = process.env.NODE_ENV === 'development'; mode: isDev ? 'development' : 'production',基础配置1、entry入口，配置webpack构建的入口文件我这里使用了package.json 中的name属性的值作为主文件的名称entry: { [packageJson?.name]: path.resolve(__dirname, './src/app.tsx'), },2、output 制定输出文件路径和文件名output: { // 开发环境不使用hash文件名 filename: isDev ? '[name].js' : '[name].[hash].js', path: path.resolve(__dirname, './dist'), publicPath: '/', clean: true, // 输出文件前会先清空目标目录的文件 },3、stats 指定webpack在控制台的输出内容stats: { all: false, assets: true, errors: true, assetsSort: '!size', // 按照文件大小倒序 entrypoints: true, modules: false, assetsSpace: 1000, preset: 'minimal', },4、devServer 配置本地开发服务器，如端口，代理等，此处不做详细说明，5、devtool 制定sourcemap文件生成方式devtool: isDev ? 'inline-source-map' : 'source-map', // 开发环境直接打包到js文件中，现网环境打包到独立文件，我的处理方式是在自动化部署工具中将sourcemap文件保存到特定地方，线上排查的时候使用6、resolve 配置6-1 extensions 指定webpack需要处理的文件扩展名类型6-2 alias 路径别名，注意要去 tsconfig 中相应配置，否则代码中会报ts错误项目使用的loader处理module说明ts-loader 处理typescript 语法以及es6特性（包含了babel-loader）style-loader 处理样式资源到html中，开发环境使用MiniCssExtractPlugin.loader 处理样式资源到单独的样式文件中，生产环境使用css-loader 让我们可以在js(x)或者ts(x)中使用import语句导入样式文件 如 import ‘./style.less’postcss-loader 对css进行编译处理，本项目主要用来处理 px2rem 将我们的样式中的px转为rem（只能针对import导入的样式文件，行内样式不生效）less-loader less编译为cssurl-loader 处理图片和字体等资源，小于limit则编码，大于则处理路径，包含了 file-loader（file-loader 主要作用是使我们可以在js(x)或者ts(x)中使用import语句导入静态资源文件 import ‘./xxx.png’）使用到的plugins做打包后处理说明copy-webpack-plugin 拷贝 public下的静态资源到 dist 目录clean-webpack-plugin 清理打包目标目录，防止重复文件WebpackBar 美化打包进度显示的插件HtmlWebpackPlugin 处理我们的构建产物到指定的html中，重中之重MiniCssExtractPlugin 压缩我们的css文件，只在生产环境使用好了，有了上面的介绍，就可以直接看我们的webpack配置文件了主webpack.config.js// @ts-nocheck const path = require('path'); const tsImportPluginFactory = require('ts-import-plugin'); const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const smp = new SpeedMeasurePlugin(); const fs = require('fs'); const packageJson = require('./package.json'); const optimization = require('./webpack-configs/optimization'); const config = require('./webpack-configs/config'); const plugins = require('./webpack-configs/plugins'); const isDev = process.env.NODE_ENV === 'development'; const SMP_SWICTH = false; console.log('-------当前环境-------', process.env.NODE_ENV); const wrapConfig = (isDev && SMP_SWICTH) ? smp.wrap : (config) => config; module.exports = wrapConfig({ target: 'web', mode: isDev ? 'development' : 'production', entry: { [packageJson?.name]: path.resolve(__dirname, './src/app.tsx'), }, output: { filename: isDev ? '[name].js' : '[name].[hash].js', path: path.resolve(__dirname, './dist'), publicPath: '/', clean: true, }, // infrastructureLogging: { // level: 'error' // }, stats: { all: false, assets: true, errors: true, assetsSort: '!size', entrypoints: true, modules: false, assetsSpace: 1000, preset: 'minimal', }, devServer: { ...config.dev, historyApiFallback: true, // static: { // directory: path.join(__dirname, './public'), // }, watchFiles: './src/**/*', }, devtool: isDev ? 'inline-source-map' : 'source-map', resolve: { alias: { '@src': path.resolve(__dirname, './src'), '@tea/app': path.resolve(__dirname, './app'), }, extensions: ['.ts', '.tsx', '.js', 'less'], }, module: { rules: [ { test: /\.(jsx|tsx|js|ts)$/, loader: 'ts-loader', options: { transpileOnly: true, getCustomTransformers: () => ({ before: [ tsImportPluginFactory([ { style: false, libraryName: 'lodash', libraryDirectory: null, camel2DashComponentName: false, }, { style: true }, ]), ], }), compilerOptions: { module: 'esnext', }, }, exclude: /node_modules/, }, { test: /\.(le|c)ss$/, use: [ isDev ? 'style-loader' : MiniCssExtractPlugin.loader, // 现网环境才提取css到一个文件中 { loader: 'css-loader', // 使用import语句导入样式 }, { loader: "postcss-loader", options: { postcssOptions: { config: './postcss.config.js', }, sourceMap: true, } }, { loader: 'less-loader', // 转less为css options: { lessOptions: { modifyVars: { '@body-background': '#f5f5f5', }, javascriptEnabled: true, }, }, }, // { // loader: 'style-resources-loader', // options: { // patterns: path.resolve(__dirname, './src/styles/common.less'), // 全局引入公共的scss 文件 // }, // }, ], }, { test: /\.(png|jp(e)?g|gif|woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'url-loader', // 处理图片和字体等资源，小于limit则编码，大于则处理路径，包含了 file-loader options: { limit: 8192, }, }, ], }, ], }, watchOptions: { // 设置不监听的⽂件或⽂件夹，默认为空 ignored: /node_modules/, // ⽂件改变不会⽴即执⾏，⽽是会等待300ms之后再去执⾏ aggregateTimeout: 300, // 原理是轮询系统⽂件有⽆变化再去更新的，默认1秒钟轮询1000次 poll: 1000, }, plugins, optimization: !isDev ? optimization : {}, }); 在根目录下的wenpack-configs 目录中的下面三个拆出来的jswebpack 插件配置 plugins.jsconst path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const WebpackBar = require('webpackbar'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const chalk = require('chalk'); const webpack = require('webpack'); const isDev = process.env.NODE_ENV === 'development'; const config = require('./config'); module.exports = [ new CopyWebpackPlugin({ patterns: [ { from: path.resolve(__dirname, '../public/px2rem-hike.js') } ], }), new CleanWebpackPlugin({ dry: false, // 是否打印删除的内容 }), // 热更新替换 new webpack.HotModuleReplacementPlugin(), // @ts-ignore new WebpackBar({ name: '能碳工场移动端h5', color: '#0049b0', // 默认green，进度条颜色支持HEX basic: true, // 默认true，启用一个简单的日志报告器 reporter: { change() { console.log(chalk.blue.bold('文件修改，重新编译...')); }, afterAllDone(context) { console.log(chalk.bgBlue.white(' 能碳工场移动端 ') + chalk.green(' 编译完成')); isDev && console.log(chalk.bgBlue.white(' 能碳工场移动端 ') + chalk.green(' 开发预览地址：http://127.0.0.1:' + config.dev.port)) }, }, }), new HtmlWebpackPlugin({ minify: false, chunks: 'all', template: path.resolve(__dirname, '../public/index.html'), filename: 'index.html' }), new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|ja|ko/), ].concat(isDev ? [] : [new MiniCssExtractPlugin({ filename: '[name].[hash].css', })])webpack优化配置 optimization.jsconst CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = { minimize: true, minimizer: [ new CssMinimizerPlugin(), '...' // 压缩css 和 js ], splitChunks: { chunks: 'async', cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10, reuseExistingChunk: true, }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true, }, }, }, }; 其他常用需要修改配置 config.jsmodule.exports = { dev: { host: '0.0.0.0', port: 10010, hot: true, open: false, client: { overlay: { errors: true, warnings: false, }, }, proxy: { '/api': { // logLevel: 'debug', changeOrigin: true, pathRewrite: { '^/api': '' }, target: 'http://30.168.123.79', }, }, } }; -
HTTP缓存优先级问题 HTTP缓存主要有两种缓存：强缓存和对比缓存（也叫协商缓存）。强缓存：只要请求了一次，在有效时间内，不会再请求服务器（请求都不会发起），直接从浏览器本地缓存中获取资源。主要字段有（expires：date（过期日期）、cache-control： max-age=time（毫秒数，多久之后过期） |no-cache|no-store）。如果expires和cache-control同时存在，cache-control会覆盖expires。建议两个都写，cache-control是http1.1的头字段，expires是http1.0的头字段，都写兼容会好点。对比缓存：无论是否变化，是否过期都会发起请求，如果内容没过期，直接返回304，从浏览器缓存中拉取文件，否则直接返回更新后的内容。主要字 段有：服务器端返回字段 Etag： xxxx (一般为md5值) 对应客户端匹 配字段为， If-None-Match: w/xxx(xxx的值和上面的etag的xxx一样则返 回304，否则返回修改后的资源)。服务器端返回字段：Last-Modifieddate(日期),对应客户端匹配字段If-Modified-Since:date（如果服务器date小于等于客户端请求date则返回304，否则返回修改后的资源））。同时存在各种缓存头时，各缓存头优先级及生效情况:强缓存和对比缓存同时存在，如果强缓存还在生效期则强制缓存覆盖对比缓存，对比缓存不生效；如果强缓存不在有效期，对比缓存生效。即：强缓存优先级 > 对比缓存优先级强缓存expires和cache-control同时存在时，则cache-control会覆盖expires，expires无论有没有过期，都无效。 即：cache-control优先级 > expires优先级。对比缓存Etag和Last-Modified同时存在时，则Etag会覆盖Last-Modified，Last-Modified不会生效。即：ETag优先级 > Last-Modified优先级。当然还有一种缓存pragma，和cache-control类似，前者是http1.0内容后者是http1.1内容，并且pragma优先级 > cache-control优先级，不过前者目前基本不使用。针对不同的项目，如果css和js在打包时加了md5值，建议直接使用强缓存，并且expires和cache-control同时使用，建议设置时长为7天较为妥当。图片文件如果没有加md5值，建议采用对比缓存，html文件也建议采用对比缓存。ps: 当我们不设置cache-control，只设置对比缓存，在不同浏览器下会有不同的表现。chrome会直接从本地缓存获取，其他会请求服务器返回304.这时候有两种方式让他们的响应一致。1、设置cache-control: public, max-age=0;记住，这里的public是关键。因为默认值是private，表示其他代理都不要缓存，只有服务器缓存，而max-age又为0，所以每次都会发起200的请求。设置public的意思就是允许其他各级代理缓存资源，因此如果资源没改变会返回304。 2、直接设置max-age=1000。即是一秒之后内容过期，目的是触发浏览器缓存。也能达到想要304的效果。本文转载自：https://www.imooc.com/article/details/id/22841
-
HTTP常见状态码 HTTP常见状态码200 OK 服务器成功处理了请求（这个是我们见到最多的）204 No Content 请求成功处理，没有实体的主体返回206 Partial Content GET范围请求已成功处理301/302 Moved Permanently（重定向）请求的URL已移走。Response中应该包含一个Location URL, 说明资源现在所处的位置303 See Other 临时重定向，期望使用GET定向获取304 Not Modified 发送的附带条件请求未满足307 Temporary Redirect 临时重定向，POST不会变成GET400 Bad Request 请求报文语法错误或参数错误401 Unauthorized 需要通过HTTP认证，或认证失败403 Forbidden 请求资源被拒绝404 Not Found(页面丢失)未找到资源500 Internal Server Error 服务器故障或Web应用故障501 Internal Server Error服务器遇到一个错误，使其无法对请求提供服务503 Service Unavailable 服务器超负载或停机维护HTTP状态码（HTTP Status Code）是用以表示网页服务器HTTP响应状态的3位数字代码。 状态码响应类别原因短语 1XX信息性状态码（Informational）服务器正在处理请求 2XX成功状态码（Success）请求已正常处理完毕 3XX重定向状态码（Redirection）需要进行额外操作以完成请求 4XX客户端错误状态码（Client Error）客户端原因导致服务器无法处理请求 5XX服务器错误状态码（Server Error）服务器原因导致处理请求出错 1开头 （请求已被接受，需要继续处理）这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。100 （部分接受） 客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。 101 （已了解） 服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。102 （已接收） 由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行。2开头 （请求成功）表示成功处理了请求的状态代码。200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。 201 （已创建） 请求成功并且服务器创建了新的资源。 202 （已接受） 服务器已接受请求，但尚未处理。 203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。 204 （无内容） 服务器成功处理了请求，但没有返回任何内容。 205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。206 （部分内容） 服务器成功处理了部分 GET 请求。3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。 301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。 305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。 307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。400 （错误请求） 服务器不理解请求的语法。 401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。 403 （禁止） 服务器拒绝请求。404 （未找到） 服务器找不到请求的网页。405 （方法禁用） 禁用请求中指定的方法。 406 （不接受） 无法使用请求的内容特性响应请求的网页。 407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。408 （请求超时） 服务器等候请求时发生超时。 409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。 410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。 411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。 412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。 413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。 414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。 415 （不支持的媒体类型） 请求的格式不受请求页面的支持。 416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。 417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。500 （服务器内部错误） 服务器遇到错误，无法完成请求。 501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。 502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。 503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。 504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。 505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。转载原文：https://blog.csdn.net/lhjuejiang/article/details/79474199
