学做土建资料员的网站,宣传片制作公司报价,wordpress插件 网站,wordpress下载流程一些思考
在公司项目中#xff0c;需要启一个新的前端工程#xff08;一个基于Webpack的React工程#xff09;。因为同一个项目中有其他的前端工程#xff0c;我们最开始想的是参考另外一个工程的配置重启一个新的工程#xff0c;但是又因为原来的工程用的库版本都比较老…一些思考
在公司项目中需要启一个新的前端工程一个基于Webpack的React工程。因为同一个项目中有其他的前端工程我们最开始想的是参考另外一个工程的配置重启一个新的工程但是又因为原来的工程用的库版本都比较老而我们这个新的工程又需要安装最新的依赖所以就只能从头开始启一个工程了。
但是这个过程也是比较曲折的经历了几次推翻重启。 首先第一版我们为了避免各种依赖之间的版本冲突就将原来工程中的packages.json文件中内容复制到新工程里然后再将我们需要的Webpack配置以及其他的基础配置配好后启动测试。测试通过后我们尝试将我们想要升级的依赖升级到我们想要的版本比如React18和Webpack5。在这个期间也会出现一些需要修改的配置文件比如旧版本的写法不适用于新版本这时我们就需要用新版本的写法覆盖旧版本的内容。解决完这部分问题后我们已确定我们的工程可以正确启动了并且可以达到我们想要的启动后的结果所以我们就认为这部分工作我们已经做完了。但是为了确保我们的思路是否正确我们将产出的结果拿去给公司更senior的同事看了后他提出了一些建设性的意见比如
由于我们的做法是将旧工程的配置文件都复制到新的工程里面来所以里面会有很多我们暂时用不到的依赖、配置那这时候就会有很多冗余代码并且会降低构建速度还会造成配置混乱增加项目的复杂度和维护成本也会存在一些潜在的错误或者问题对于我们启工程且后续需要在这个工程上编码的同学来说一些没有用的配置也会给我们带来压力比如会增加阅读和理解代码的成本也会让我们的思路变得不清晰不利于学习。
所以基于此意见我们选择重新启一个工程。 然后第二版我们根据上一次的经验选择用到什么再加什么配置而不是一股脑的把所有需要用到的配置都加上去最后再解决冲突。这样的好处就是能让我们的思路变得清晰并且让我们能更好地理解这个工程在其他人需要了解的时候我们也可以能清晰地给讲出某一个配置的由来及作用是什么。这个时候我们的步骤是
先使用create-react-app脚手架搭建一个基础的React工程测试运行通过后进行下一步。在其中增加Webpack的相关配置比如增加Webpack.config.common.js文件编写如下文提到的Webpack四个核心概念的内容entry、output、loader、plugins然后再补充dev环境的Webpack配置Webpack.config.dev.js文件修改script运行脚本为webpack serve --config config/webpack.config.dev.js --progress。然后进行测试运行。
参考本片文章从零开始创建reactwebpack项目
在这个过程期间我们有遇到一些问题也去求助了senior同事他们告诉我们说我们的方法也可以用但是在一般正式的项目上如果需要重写使用create-react-app脚手架搭建的工程中的Webpack相关配置时会采用raect-app-rewired的方式创建react-scripts 提供的 config-overrides.js 文件可以修改 Webpack 配置。config-overrides.js 文件通过导出一个函数来修改 CRA 的默认配置。这个函数接受一个 config 参数可以在其中修改 Webpack 配置。例如可以添加、修改或删除 Loaders、Plugins、Optimizations 等等。下面是一个简单的例子
上述示例在 Webpack 配置中添加了一个处理 .txt 文件的 Loader并将输出目录更改为 custom-build。
除此之外也可以使用执行eject脚本的方式暴露出Webpack配置文件然后进行自定义设置。
执行以下命令来暴露Webpack配置文件npm run eject执行上述命令后Create React App将会生成一个 config 文件夹和相应的配置文件包括 webpack.config.js。可以在这些配置文件中进行修改和定制。然后可以根据需要修改Webpack配置例如添加额外的loader、plugins、自定义路径等。修改配置后运行 npm start启动开发服务器。 以上的工作就算告一段落了。我们在总结的过程中从另外一位同事那里了解到一般比较大的项目并且需要的配置比较多的项目比如测试WebpackantDesign、routes等也会采用umi脚手架启动工程。umi是阿里推出的一个企业级的React应用开发框架它提供了一系列工具和约定帮助开发者快速构建可扩展、高效和易维护的React应用。 umi脚手架具有以下主要特点和功能
路由管理UMI内置了强大的路由系统支持配置式路由和约定式路由。通过配置文件或目录结构自动生成路由支持嵌套路由、动态路由、权限控制等功能。插件机制UMI提供了丰富的插件机制可以通过引入插件来扩展和定制项目功能。UMI插件可以处理路由、构建、数据模拟、国际化等方面的需求且插件具有良好的生态和社区支持。开发模式支持UMI支持多种开发模式包括单页应用SPA、服务器渲染SSR、静态网站生成SSG等。可以根据项目需求选择合适的开发模式并进行相应的配置。状态管理UMI天然支持多种状态管理方案包括React Context、Redux、Mobx等。可以根据项目需求选择合适的状态管理方案。构建工具UMI集成了Webpack和Babel等构建工具使得项目的构建和打包过程更加简化。可以通过配置文件对构建过程进行定制并享受热更新、代码分割、按需加载等优秀的构建特性。测试和部署UMI提供了一系列测试工具和部署方案可以帮助编写和运行单元测试、集成测试并方便地将应用程序部署到各种环境中。
但与此同时umi也存在一定的缺点
配置复杂性虽然umi提供了丰富的配置选项但也会导致配置复杂性增加。对于初学者或简单项目来说会过于复杂且“重”需要手动删除不需要的依赖及配置依赖关系umi依赖于一些其他的工具或库例如Webpack、babel、React等。这些依赖关系可能会导致一些版本兼容性或依赖冲突的问题需要手动管理和解决。
所以在工作中可以根据项目的需要选择脚手架去创建工程。这个部分还需要再了解跟着有经验的同事深入学习。 上述工作完成后我也整理了一些关于Webapck的相关内容整理一下思路以便在以后的工作中用到。 为什么需要打包工具 开发时我们会使用框架React、VueES6模块化语法Less/Sass等css预处理器等语法 进行开发。 这样的代码要想在浏览器运行必须经过编译成浏览器能识别的JS、css等语法才能运行。所以打包工具就是帮我们完成这一步骤。除此之外打包工具还能压缩代码、做兼容性处理、提升代码性能等。 Webpack的核心概念 在弄清楚Webpack之前需要了解清楚以下四个核心概念。 entry 在Webpack中entry指定应用程序的入口点entry point。它是Webpack构建过程的起点表示Webpack应该从哪个文件开始构建应用程序的依赖图。 在Webpack配置文件中可以通过entry属性来指定一个或多个入口点。每个入口点对应一个文件路径可以是单个JavaScript文件、CSS文件、HTML文件或其它类型的文件。Webpack会根据这些入口点开始分析和解析依赖关系构建整个应用程序的依赖图。 例如
module.exports {entry: ./src/main.js,
};
在上面的例子中entry属性指定了.src/main/js作为应用程序的入口点。Webpack将从这份文件开始构建应用程序并根据它的依赖关系进一步解析其他模块和资源。
output
在Webpack中output指的是构建输出的配置选项。定义了Webpack打包后的文件输出位置和文件名等相关信息。如下是常用的配置选项
path指定输出文件的目标路径。例如path: path.resolve(__dirname, dist)将输出文件保存在项目根目录下的dist文件夹中。filename指定输出文件的名称。默认为bundle.js也可以使用占位符和变量来生成动态的文件名。例如filenamebundle.js将生成一个名为bundle.js的输出文件。publicPath指定输出文件在被引用时的公共路径。用于配置在浏览器中加载静态资源的路径。例如publicPath: /assets/会将输出文件的路径前缀设置为/assets/。chunkFilename: 配置非入口点的代码块chunk的文件名。这些代码块通常是按需加载时生成的。例如chunkFilename: [name].js将生成基于代码块名称的文件名。
module.exports {output: {path: path.resolve(__dirname, dist),filename: bundle.js,publicPath: /assets/,},
};
loader
在Webpack中loader指的是用于处理特定类型的文件的加载器。Webpack在打包过程中会遇到不同类型的文件例如JavaScript文件、CSS文件、图片、字体文件等而加载器会告诉Webpack如何处理这些文件。
Webpack的加载器通过转换文件内容或执行一些额外的任务来对文件进行处理。加载器可以将文件转换为JavaScript模块将Sass文件转换为CSS对图片进行压缩和优化等等。加载器可以链式调用允许按顺序应用一系列转化和处理操作。
加载器通常在Webpack配置文件的module.rules属性中定义。每个加载器规则由两部分组成
test用于匹配文件路径的正则表达式指定了应该由该加载器进行处理的文件类型。use指定使用的加载器可以是单个加载器或多个加载器组成的数组。加载器可以是内置的Webpack加载器也可以是通过npm安装的第三方加载器。
例如
module.exports {// 其他配置项...module: {rules: [{test: /\.css$/,use: [style-loader, css-loader],},{test: /\.(png|jpg|gif)$/,use: [file-loader],},],},
};上述示例中定义了两个加载器规则
对于以.css结尾的文件使用style-loader和css-loader加载器进行处理。css-loader用于解析CSS文件而style-loader用于将解析后的CSS添加到页面中。对于以.png、.jpg或.gif结尾的文件使用file-loader加载器进行处理。file-loader用于处理图片文件将它们复制到输出目录并返回最终的URL。
plugins
在Webpack中plugins指的是用于执行更广泛范围任务饿自定义构建流程的插件。插件可以用于从打包过程中的各个阶段添加额外的功能和扩展Webpack的功能。
Webpack的插件可以处理各种任务包括但不限于
优化输出文件例如压缩、混淆和代码分割处理非JavaScript文件例如将CSS提取为单独的文件、压缩图像等注入全局变量或环境变量生成HTML文件自动引入打包后的资源清理输出目录确保每次构建都是干净的收集统计信息例如构建报告、Bundle分析等在构建过程中执行自定义逻辑和任务。
要使用插件需要在Webpack配置文件中的plugins属性中实例化和配置它们。插件可以是内置的Webpack插件也可以是通过npm安装的第三方插件。
例如
const HtmlWebpackPlugin require(html-webpack-plugin);
const { CleanWebpackPlugin } require(clean-webpack-plugin);module.exports {// 其他配置项...plugins: [new HtmlWebpackPlugin({template: ./src/index.html,}),new CleanWebpackPlugin(),],
};
在上述示例中使用到了两个插件
HtmlWebpackPlugin用于生成HTML文件并自动将打包后的资源引入。通过指定template选项可以指定基于哪个模版文件生成的HTML文件CleanWebackPlugin用于清理输出目录。每次构建之前它会自动清除输出目录确保每次构建都是干净的。
