前端工程化
文章平均质量分 79
多云转晴ing
这个作者很懒,什么都没留下…
展开
-
Git 使用总结
git: 分布式版本控制系统。Git 终端快捷键Git终端命令遵循Linux命令格式。比如 touch、ls 等命令都可以使用。快捷键作用ctrl + a回到行首ctrl + e回到行尾ctrl + l清屏echo "文字" > xxx.txt向xxx.txt文件中写入内容(会被覆盖)VI 编辑器命令使用 vi 文件名 打开文件。保存并退出时,按 Esc + shift + z + z,或者 Esc + :wq!;插入文本时,按字母 i原创 2020-10-07 09:13:50 · 404 阅读 · 0 评论 -
webpack配置 react + ts 项目热替换功能
使用 webpack 配置项目坑是真多呀!搞了一下午才把坑填完,最后得出结论:遇到坑就到 npm 官网,看官方文档,使用搜索引擎看别人的填坑经历很多时候不一定能解决问题,遇到问题还是去 npm 或者 GitHub 上比较快啊。。这篇文章分享一下我遇到的两个坑~react + ts 项目配置热替换首先配置 webpack 和 tsconfig。React 使用热更替官方推荐下载 react-hot-loader 这个包,使用时需要先下载。webpack 配置如下:const { HotModuleRep原创 2020-08-22 16:55:14 · 559 阅读 · 0 评论 -
使用 CentOS 7 部署前端项目
购买服务器以腾讯云为例,如果是 25 岁以下,可以免学生认证,使用校园优惠套餐。购买地址:云 + 校园本文以 CentOS 为例,购买后,会初始化 root 密码,就可以使用云服务器了!配置服务器购买之后就可以使用 root 用户名和腾讯云提供的初始密码登录到云服务中。可以使用官网在线终端命令行程序操作,也可以使用 Xshell 或者 git 登录服务器,使用时需要先下载。本文以 git 为例。输入以下命令登录:ssh root@IP地址然后输入密码,就登陆到云服务中了。默认的 root原创 2020-08-15 09:24:37 · 1751 阅读 · 0 评论 -
webpack使用笔记(六)优化项目
webpack-merge使用 webpack-merge 插件可以让不同环境的 webpack 配置分别写在不同的文件里。在配置 webpack 时可以将开发环境和生产环节相同的配置项提取出来,写在一个单独的文件中,这样做可以更好的管理项目配置。// 提取出 webpack-base文件module.exports = { // ....}// webpack-config-dev.js 文件const { merge } = require('webpack-merge');co原创 2020-08-01 09:35:56 · 370 阅读 · 0 评论 -
webpack使用笔记(五)代码压缩与文件分离
配置完有关 CSS loader 后,还有一个问题,我们不想将 CSS 都插入到 style 标签中,如果 CSS 样式代码很多,会导致生成的 HTML 文件很大,我们希望使用 <link> 标签引入打包后的 CSS 文件(将 CSS 单独提取出来),这时候就要使用一个插件:mini-css-extract-plugin。下载:yarn add mini-css-extract-plugin -D。配置:// webpack.config.dev.jslet MiniCssExtract原创 2020-07-30 17:36:07 · 549 阅读 · 0 评论 -
webpack使用笔记(四)loader原理与实现
loader 的执行顺序loader 的执行顺序是:从右到左、从下到上。在配置 sass 样式时,需要这么去写 loader:{ test: /\.sass$/, use: ['style-loader','css-loader','sass-loader']}loader 会先执行 sass-loader,让 sass 格式的样式转成 css 格式,然后使用 css-loader 处理的样式中引入的图片路径,最后使用 style-loader 将样式插入到 style 标签中。因原创 2020-07-30 10:16:19 · 1391 阅读 · 1 评论 -
webpack使用笔记(三)配置devServer
配置 devServer 之前需要先下载yarn add webpack-dev-server -D下载好之后,就可以在 webpack 配置项中去配置 webpack-dev-server 啦。devServer 的配置项很多,这里只对使用比较多的配置项做一下介绍。devServer 的配置应该是在开发环境下进行。下面是一个简单的配置内容:if(isDev){ // 如果是开发环境 config.devServer = { // 设置 host(默认就是 loc原创 2020-07-30 09:38:27 · 1007 阅读 · 0 评论 -
webpack使用笔记(二)loader的使用
module 配置项在 module 中主要配置 loader,loader 是模块转换器,比如把 sass 转成 css。配置了相关资源的 loader,我们就可以直接在程序中用 import 的方式引入非 js 资源。loader 能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中。需要下载的 loader 以及作用:babel-loader:解析 JavaScript,包括 js 的新特性、新语法;css-loader:处理 css 语法,比如 @imp原创 2020-07-29 22:34:55 · 645 阅读 · 0 评论 -
webpack使用笔记(一)基础配置
webpack 是一个现代 JavaScript 应用程序的静态模块打包器,已经成为前端开发不可或缺的工具。特别是在开发大型项目时,项目太大,文件过多导致难以维护,webpack 为我们提供了很好的帮助。首先,配置 webpack,大致的骨架是这样的,这是最基本的配置内容:{ entry: "", // 入口配置 mode: 'development', // 环境配置 output: {}, // 打包输出配置 module: {},原创 2020-07-29 20:25:51 · 412 阅读 · 0 评论