今天突然有兴致想要学习一下前端的技术,所以特此记录学习前端之路。由于之前在公司做的项目大部分都是关于JSP页面的增删改查,所以前端后端都是一个人来写的,对于前端还只是停留在js、html、css阶段,对于一些前端框架是一点也不了解,正好学习后端的时候遇到了cookie、session、token的问题,特此也简单的了解一下前端知识。

概念介绍

大概在网上找了一些的教程,由于是想速成,所以先从搭建项目开始学起了。搭建项目使用的webpack,我觉得前端的webpack和后端的gradle、maven比较类似都是简化我们开发的一套工具(这里不知道类比的准不准确,如有误的话希望能够指出来)。前端的Node我觉得就像是后端的Java,也是一开始上来就让我安装环境配置环境变量。概念介绍完以后废话不多说直接开搭一个简单的项目。

环境准备

工欲善其事,必先利其器。搭建项目之前要准备一下环境。

  • 首先当然是安装Node环境了,node下载地址这里直接选择相应版本的Node直接下载安装,一直下一步即可。如果安装成功的话node -v 即可显示出版本号。
  • 安装Visual Studio Code软件。Visual下载地址,也是选择自己相对应的机器版本下载安装即可。

搭建项目

环境准备好以后,接下来就是搭建项目了

  • 随便建立一个文件夹,然后使用Visual Studio Code打开。

  • Visual Studio Code中打开命令行,怎么打开如下图所示。

  • 打开后再命令行输入 npm init -y命令,发现生成一个package.json的文件(包管理配置文件),快速初始化项目。

  • 在根目录下建立两个文件夹src(存放源代码的文件夹)和dist(存放发布代码的目录)文件夹。

  • src下建立index.html文件。怎么快速生成html的模板内容呢?有个快捷键(输入叹号!然后按Tab按键,即可快速生成html模板内容)

  • src下建立index.js文件,这是入口文件。

  • 安装cnpm(使用npm有时候会速度慢,因为我们从外国网站下载东西,cnpm是中国的npm直接从国内网站下载,速度会快一些)命令为npm i cnpm -g

  • 使用cnpm安装webpack,命令cnpm i www.huanhua2zhuc.cn webpack www.yunzeyle.cn-www.jiuyueguojizc.cn D

  • 使用cnpm安装脚手架,命令cnpm i webpack-cli -D

  • 在根目录下新建webpack.config.js文件,然后加入变量,

    	// 向外暴露一个打包的配置对象
    	module.exports = {
    	    mode:www.wanyayuue.cn 'development',
    	}
    
    

    这里mode可以填写两个变量development和production,一个是开发过程中用的,在dist文件中生成的main.js文件是否压缩,如果填写的变量是development那么就不压缩,如果是production则压缩js文件。

  • 此时我们要安装动态部署的插件,即我们每次修改js文件后不需要重启项目,只需要刷新即可。插件安装命令为cnpm i webpack-dev-server -D,并且在package.json中在scripts中加入参数 "dev": "webpack-dev-server --open --port 3000"--open作用是启动项目成功后自动打开页面,--port作用是控制端口号。

  • 接下来是优化阶段,html文件我们每次在开发过程中按保存键,如果每次都和硬盘做交互的话,那么会浪费时间并且对磁盘损耗也不好。所以我们安装一个插件可以将每次保存的html放入内存中,我们每次修改的话都会作用到内存中的文件。插件安装命令为cnpm i html-webpack-plugin -D。并且在webpack.config.js配置文件中配置如下。

    	const HtmlWebpackPlugin = require(www.jinyang3zhuc.cn'html-webpack-plugin') // 导入在内存中自动生成index页面的插件
    	const path = require('path')
    
    	// 创建一个插件的实例对象
    	const htmlplugin = new HtmlWebpackPlugin({
    	    template: path.join(www.tianhyLzc.cn__dirname,'./src/index.html'), // 源文件
    	    filename: 'index.html'
    	})
    
    	// 向外暴露一个打包的配置对象
    	module.exports =www.yachengyl.cn  {
    	    mode: 'development',
    	    plugins:[
    	        htmlplugin
    	    ]
    	}
    
    
  • 启动项目,直接在命令行中输入npm run dev即可访问到我们的index.html页面了。

作为一个对前端一无所知的我来说能够启动起来看到页面已经是成功的迈出第一步了。接下来有时间依然会不断的深入学习前端,当然还是以会用为主,一些原理我也不会讲(当然我也不会)。毕竟主要精力还是放在后端方向的。

如果大家根据我的步骤没有成功的,希望能够指出来。我会改正并完善

《后端也要懂一点前端系列》使用webpack搭建项目的更多相关文章

  1. 懂一点Python系列——快速入门

    本文面相有 一定编程基础 的朋友学习,所以略过了 环境安装.IDE 搭建 等一系列简单繁琐的事情. 一.Python 简介 Python 英文原意为 "蟒蛇",直到 1989 年荷 ...

  2. 26、前端知识点--利用webpack搭建脚手架一套完整流程

    前言 我们的目标是利用webpack搭建一个基于react + react-router +dva + es6 + less + antd用于中后台开发的脚手架,同学们可能会说社区里那么多优秀的脚手架 ...

  3. [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...

  4. [后端人员耍前端系列]AngularJs篇:使用AngularJs打造一个简易权限系统

    一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多 ...

  5. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  6. 【转】无后端(nobackend):前端优先的Web开发【译】

    每个应用都由两样东西构成:该应用独有的功能和所有应用共有的功能,比方说用户注册.登录.忘记密码等.而从用户的角度出发,那些独有的功能归结起来就是用户界面以及系统的行为模式.而在视觉表象之后的功能,用户 ...

  7. Vue管理系统前端系列一vue-cli4.x 初始化项目

    目录 项目介绍 技术基础 开发环境 安装工具 快速原型开发 创建项目 配置相关说明 目录结构 项目介绍 lion-ui 是一个基于 RBAC 的管理系统前端项目,采用 vue 和 element-ui ...

  8. 循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

    循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...

  9. 前后端分离,如何在前端项目中动态插入后端API基地址?(in docker)

    开门见山,本文分享前后端分离,容器化前端项目时动态插入后端API基地址,这是一个很赞的实践,解决了前端项目容器化过程中受制后端调用的尴尬. 尴尬从何而来 常见的web前后端分离:前后端分开部署,前端项 ...

随机推荐

  1. LabVIEW面向对象的ActorFramework(3)

    四.LabVIEW面向对象的编程架构:Actor Framework Actor Framework是一个软件类库,用以支持编写有多个VI独立运行且相互间可通信的应用程序,在该类型应用程序中,每个VI ...

  2. mini2440 裸机程序,下载到nand 里面,复制到 sdram 中不运行

    按照韦东山的视频中 sdram的裸机代码,写了一份,通过 minitools 下载到 0x30000000,然后烧录到 nand中,接过不能正常运行. 尝试过多种方法后,只有一种解决方法,就是不要用 ...

  3. 一、VIP课程:互联网工程专题 01-Git基本概念与核心命令掌握

    第一课:Git基本概念与核心命令掌握.docx 课程概要: GIT 体系概述 GIT 核心命令使用 GIT 底层原理 一.GIT体系概述 1.使用方式区别 从本地把文件推送远程服务,SVN只需要com ...

  4. JavaScript—纯函数

    定义 一个函数的返回结果只依赖它的参数,而且在计算过程中不会产生其他副作用,也就是不会对外部的数据造成影响或改变. 理解:函数的返回结果只依赖它的参数 const a= 1; const b= (c) ...

  5. [WesternCTF2018]shrine

    0x00 知识点 SSTI模板注入: 模板注入涉及的是服务端Web应用使用模板引擎渲染用户请求的过程 服务端把用户输入的内容渲染成模板就可能造成SSTI(Server-Side Template In ...

  6. CentOS7使用firewalld的基本命令

    转自:https://www.cnblogs.com/moxiaoan/p/5683743.html.Thanks for  莫小安   1.firewalld的基本使用 启动: systemctl ...

  7. rewrite例子集合

    在 httpd 中将一个域名转发到另一个域名 虚拟主机世界近期更换了域名,新域名为 www.wbhw.com, 更加简短好记.这时需要将原来的域名 webhosting-world.com, 以及论坛 ...

  8. UVALive 3983 捡垃圾的机器人 DP

    这个题目我最初的做法沿用树形DP的做法,设置一个 dp[i][0]表示机器人在i点不回去的最短路径,dp[i][1]表示机器人在i点回去的最短路径,规划方向为i-1向i转移,结果发现这个不能用树形的结 ...

  9. Java 关于md5加密

    package com.mi.util; /** * md5+salt 长度为32的加密 * @author admin * */ public class MD5 { public static v ...

  10. SQL基础教程(第2版)第3章 聚合与排序:3-4 对查询结果进行排序

    第3章 聚合与排序:3-4 对查询结果进行排序 ● 使用ORDER BY子句对查询结果进行排序.● 在ORDER BY子句中列名的后面使用关键字ASC可以(通常省略默认)进行升序排序,使用DESC关键 ...