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


声明:本文转载自https://my.oschina.net/u/4030990/blog/3137901,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

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

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

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

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

本文代码地址

本文发表于2019年12月05日 18:00
(c)注:本文转载自https://my.oschina.net/u/4030990/blog/3137901,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 141 讨论 0 喜欢 0

讨论

周娱

君子和而不同
按照自己的方式,去度过人生

8031 3921040
抢先体验

扫码体验
趣味小程序
文字表情生成器

加入组织

扫码添加周娱微信
备注“加入组织”
邀请进开发群

闪念胶囊

人活一辈子,不是一年两年。时间是有连续性的,做抉择的时候要多看几步。保持警惕,大丈夫有所为,有所不为。

跟人接触,不要想:我能从你身上得到什么,要想:我能给你什么。 想通了,内核就稳了。

这个世界上,别人只会看你现在的样子而不是以后的样子。你以后的样子只有自己才相信。如果没有执行力,一切都是虚妄。

对普通人来说,人和人相处其实最重要的是感觉。感觉不好,你说什么都没用,怎么解释都没用,越说越错,反正最后不好的锅都往你身上扣。所谓“说你行你就行,不行也行。说你不行,你就不行,行也不行”就是这个意思。狼要吃人根本不需要理由,你也同样叫不醒装睡的人。遇到这种情况,早点闪人才是上策。不过大部分人的问题是没有闪人的心态,能力,和资源。

考985不牛逼,考上才牛逼。创业不牛逼,创业成功才牛逼。这个社会上很多人把目标当成牛逼的资本,牛逼哄哄的,死活不听劝,然后做的一塌糊涂,给别人添麻烦,让别人帮他料理后事,对此只能呵呵。

当你尝到用生气解决问题的甜头后,你就懒得再用其他方式了。你却忽略了,生气是鸩毒啊,剂量用够了,你的关系也玩完了。

年轻的时候你只搞事业不谈恋爱,等你事业有成了,钱相对自由了,你可能已经没有荷尔蒙了。

如果你经常雇佣比你矮小的人,将来我们就会变成矮人国,变成一家侏儒公司。相反,如果你每次都雇用比你高大的人,日后我们必能成为一家巨人公司。

如果一个人有充裕的时间去完成一项工作,那么他就会放慢节奏或者增加其他不必要的工作,直到花光所有的时间。

Copyright © 2016 - 2020 Cion.
All Rights Reserved.
备案:鲁ICP备19012333号-4.