正文

一步步搭建现代前端框架

了不起的js  2022-02-13  618

关键词：

前言：

因为最近正在做前端开发，发现公司里面用的都是vue了。反而最原始的html+css+js这种已经很少见了。有时候自己会做一些练习的小项目，如果按照vue脚手架来一遍的话，不仅搭建起来需要各种插件，而且项目打包出来后不管是体积还是性能都有些问题。因此，我想着自己就搭建一个简单的，可以快速实现前端开发的架子。

实现目标：js，css分离，热更新代码，静态资源服务器

1.基础环境

安装nodejs，vscode，这是最基本的配置了

2.初始化项目

创建目录，运行 npm init -y,初始化npm项目工程，此时就可以随意使用npm包进行开发了。

3.使用webpack

为什么要webpack呢？因为我们需要源码进行编译，需要开启服务，需要热更新，如果自己写的话需要大量时间。因此直接用webpack。
安装webpack，npm i webpack webpack-cli -D

4.webpack基本概念

知道webpack的基本概念：入口，出口，加载器，插件；
增加webpack.config.js文件，这个是默认加载的。
此时项目样子：

5.webpack配置

webpack.config.js里面添加基本的配置，入口，出口

const path = require('path');
const config = {
entry:"./src/main.js",
output:{
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module:{
}
}
module.exports = config;

到目前为止，基础的js开发环境已经搭好了。

6.入口html文件

我们创建html文件，将js引入进去

你好，中国

运行，

基础的为本项目搭建完毕。可是此时并没有体现出工作流程的优越性。

我们需要自己手动添加js的引用
我们运行项目的时候还需要手动刷新打开
我们需要手动编译

7.热更+静态资源服务

引入webpack-dev-serverdev-server
npm install webpack-dev-server --save-dev

注意这个，必须填写，路径必须写对，不然不生效

8.html-webpack-plugin

刚刚我们创建的项目，html是我们手动创建，并且加入js的。
这里我们使用另外一个插件，来解决这个问题；

尝试更改filename到dist目录，不行，因此把publicPath，contentBase改成了根目录，
这个时候插件才能成功

注意各种路径，非常容易配置错误，简易直接下载脚手架来拷贝。

9.css文件

缺了个css，我们加入css。
css要在js文件里进行导入
import "./main.css";
console.log("你好");

然后生成的结果：

样式是内嵌到代码里面的；

再来一个插件extract-text-webpack-plugin

上面实现了基本的html+css+js开发的条件。

webpack配置的时候一定要注意路径的配置，可能控制台不报错，但是项目跑起来后浏览器里面就有问题。因此建议先拷贝代码，然后对比自己写的。此外，还有各种版本兼容问题。注意！！！

我们看到，为了实现现代前端，我们新增了很多工具来完成开发；webpack现在越来越复杂了，配置项让人眼花缭乱，各种插件层出不穷。
然而，基本的架子，上面都已经可以满足了。如果有更多需求，只能增加各种配置了。
吐槽：webpack功能越来越强大，但是没用的东西也越来越多。让人感觉头大。

git 地址： https://github.com/wyy5552/mywebsite

java开发血泪之路：一步步搭建spring框架

前言作为一个服务端开发感觉一直挺排斥框架这种东西的，总觉得什么实现逻辑都帮你封装在里面了，你只需要配置这配置那个，出了问题也不知道怎么排查，之前即使写web程序也宁愿使用jetty这样的嵌入式的webserver实现，自己... 查看详情

android教你一步步搭建mvp+retrofit+rxjava网络请求框架(代码片段)

目录1.什么是MVP？2.什么是Retrofit？3.RxJava4.实践之前公司的项目用到了MVP+Retrofit+RxJava的框架进行网络请求，所以今天特此写一篇文章以做总结。相信很多人都听说过MVP、Retrofit、以及RxJava，有的人已经开始用... 查看详情

现代前端常用工具(代码片段)

...前后端分离。深入理解这个，会发现现代前端也是一步步演变过来的。服务端负责查看详情

代码篇从零开始一步步搭建自己的golang框架(代码片段)

...是如何从代码组织架构方面去避免这个问题。从零开始一步步搭建自己的golang框架。这个篇章将实现以下的功能：一个通用的基础框架，风格良好的代码组织架构；包含一些基本组件：日志、配置、数据库、队列等；对外提供htt... 查看详情

代码篇从零开始一步步搭建自己的golang框架(代码片段)

这个框架的目标是作为一个通用的框架，我希望它大而全，在日后可以直接作为我其他项目的基础模板，所以我还想继续给他添加一些功能，就当写一些demo进去吧。这篇文章，我将会添加一个队列的功能。nsq队列有很多种，我... 查看详情

一步步带你做vue后台管理框架——介绍框架

系列教程《一步步带你做vue后台管理框架》第一课github地址：vue-framework-wz线上体验地址：立即体验　　在如今的科技公司中有很多前端的需求都是要写一个类似于后台管理框架，日常的工作中会有太多重复的内容加重我们程序... 查看详情

代码篇从零开始一步步搭建自己的golang框架(代码片段)

上一篇文章里，我们定了项目基本目录结构。现在来回顾一下我的思路：创建入口文件；指定配置、日志目录；指定数据库、队列、缓存组件目录；创建数据处理的controller目录；指定公共函数等杂项。接下来，我们还是按照这... 查看详情

手写简易前端框架：vdom渲染和jsx编译(代码片段)

...一个完整的前端框架涉及到的内容还是比较多的，我们一步步的来，这篇文章来实现下vdom的渲染。来创建文本节点。如果是查看详情

代码篇从零开始一步步搭建自己的golang框架(代码片段)

上篇文章讲到数据库和redis连接的初始化已经完成，接下这篇文章会比较重要一点，我们要启动一个http服务和一个rpc服务，同时抽象出一层数据处理层来封装接口。开启http服务老规矩，先添加配置，顺便把rpc的配置也写进去，co... 查看详情

带你一步步搭建web自动化测试框架

测试框架的设计有两种思路，一种是自底向上，从脚本逐步演变完善成框架，这种适合新手了解框架的演变过程。另一种则是自顶向下，直接设计框架结构和选取各种问题的解决方案，这种适合有较多框架事... 查看详情

代码篇从零开始一步步搭建自己的golang框架(代码片段)

基本上这个基础框架拿到手之后就可以做一些自己想要做的改动了，比如你想添加个队列的插件，你可以在相应的目录里面进行修改了，但我想让它更通用一些，本篇文章将会启动一个websocket服务，并且把配置文件改成yaml格式... 查看详情

使用express.js框架一步步实现基本应用以及构建可扩展的web应用

最近过年在家有点懈怠，但是自己也不断在学习新的前端技术，在家琢磨了express.js的web框架。框架的作用就是提高开发效率，快速产出结果。即使不使用框架，我们也会在开发过程中逐渐形成构成框架。大多数的node.js... 查看详情

深入springboot原理——一步步分析springboot启动机制（starter机制）

...大简化了项目初始搭建以及开发过程。本文的目的就是一步步分析springboot的启动过程，分析springboot是如何帮我们简化这个过程的。springboot帮我们做了什么通常搭建一个基于spring的web应用，我们需要做以下工作：1、pom文件中引... 查看详情

使用hexo+github一步步搭建属于自己的博客

https://www.cnblogs.com/fengxiongZz/p/7707219.htmlhttps://www.cnblogs.com/fengxiongZz/p/7707568.html 查看详情

深入springboot原理——一步步分析springboot启动机制（starter机制）

用现代化的方式开发一个图片上传工具(代码片段)

...下心得体会。本文将会以这个名为Dolu的项目为例子，一步步介绍我是如何进行环境搭建、代码设计以及实际开发的。内容较多，还请耐心读完。项目地址：https://github.com/jrainlau/dolu一、环境搭建查看详情

asp.netcore一步步搭建个人网站_环境搭建(代码片段)

阅读目录一、部署环境1.SQLServer安装与配置2.服务器防火墙配置3.测试远程访问数据库4. IIS环境和.NETCoreWindowsServerHosting配置二、创建Asp.netCoreWeb项目三、发布网站到服务器相关资源在线演示GitHub源码欢迎大家前往我的个人... 查看详情

一步步带你做vue后台管理框架——登录功能

系列教程《一步步带你做vue后台管理框架》第三课 github地址：vue-framework-wz线上体验地址：立即体验《一步步带你做vue后台管理框架》第一课：介绍框架《一步步带你做vue后台管理框架》第二课：上手使用　　认证... 查看详情