文档章节

《后端也要懂一点前端系列》使用webpack搭建项目

 不学无数的程序员
发布于 2019/12/05 17:14
字数 1345
阅读 3.7K
收藏 12

笔者文笔功力尚浅,如有不妥,请慷慨指出,必定感激不尽

今天突然有兴致想要学习一下前端的技术,所以特此记录学习前端之路。由于之前在公司做的项目大部分都是关于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 webpack -D

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

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

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

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

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

本文代码地址

© 著作权归作者所有

不学无数的程序员

粉丝 73
博文 57
码字总数 118011
作品 0
私信 提问
加载中

评论(1)

windrise67
windrise67
加油
如何打造一个令人愉悦的前端开发环境(三)

往期回顾 前面2期都讲得是浏览器端的东西比较多,包括Webpack,虽然是Node处理的,但是还是浏览器端用的多,对于现在的前端开发来说,不懂一点服务端的东西,简直没办法活,一般的招聘要求都...

乖小鬼YQ
2017/11/29
0
0
详解如何从零开始搭建Express+Vue开发环境

准备工作 1. 为前端选择合适的预处理工具和资源管理工具 预处理工具又分为 js 预处理工具和 css 预处理工具。Javascript 一直以来最为人诟病的一点就是缺乏原生的模块机制,所有 js 代码文件...

peakedness丶
2018/11/11
58
0
如何打造一个令人愉悦的前端开发环境(四)

原文链接 此文是我同事写的,搭建Express结合Webpack。以下是正文,后面我会附上我的解读 Express 结合 Webpack 实现HMR 本篇文件主要讲结合 Webpack 和 Express 实现前后端热更新开发,如果...

乖小鬼YQ
2017/11/29
0
0
honraytech/VueThink

VueThink 项目介绍 VueThink是一套基于Vue全家桶(Vue2.x + Vue-router2.x + Vuex)+ Thinkphp的前后端分离框架。 脚手架构建也可以通过vue官方的vue-cli脚手架工具构建 实现了一般后台所需要...

honraytech
2017/03/22
0
0
openresty 前端开发序

还记得第一次尝试前后端分离的时候,是使用nginx + react 构建的spa应用,后端是java,主要处理业务逻辑逻辑部分,返回json数据,在nginx里面配置好html + js纯静态文件,再通过反向代理到j...

-外星人-
2016/12/09
885
0

没有更多内容

加载失败,请刷新页面

加载更多

00-Java 面试准备

面试之前 面试前准备简历需要注意的几个方面: 写简历、改简历,这个一定要干的。简历有两个作用,一个是吸引别人,能让别人邀请你去面试,这是前提;另一个是引导面试的人,让面试的人问你所...

源程序
今天
54
0
OSChina 周二乱弹 —— 大王(@罗马的王)颜值制霸Osc社区

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :Lunik的单曲《Seeing You Soar》 I hope you’re smiling,When seeing me soar. #今日歌曲推荐# 《Seeing You Soar》- Lunik 手...

小小编辑
今天
75
0
wordcount代码

1.写出map类 public class WCMapper extends Mapper<LongWritable,Text,Text,LongWritable>{ @Override protected void map(LongWritable key,Text value,Context context)throws IOExcepti......

七宝1
今天
59
0
Spring Batch 小任务(Tasklet)步骤

Chunk-Oriented Processing不是处理 step 的唯一方法。 考虑下面的一个场景,如果你仅仅需要调用一个存储过程,你可以在 ItemReader 中实现这个调用,然后在存储过程完成调用后返回 null。这...

honeymoose
今天
67
0
Linux日志分析

1. Linux日志文件的类型 2. 系统服务日志 2.1 syslogd的简介 2.2 syslogd的配置和使用 2.3 日志的安全性设置 2.4 远程日志记录服务 3. 日志的轮替 3.1 logrotate简介 3.2 logrotate的配置 3....

JiaMing
昨天
67
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部