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

笔者文笔功力尚浅，若有不妥，请慷慨指出，一定感激涕零

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

做为一个对前端一无所知的我来讲可以启动起来看到页面已是成功的迈出第一步了。接下来有时间依然会不断的深刻学习前端，固然仍是以会用为主，一些原理我也不会讲（固然我也不会）。毕竟主要精力仍是放在后端方向的。

若是你们根据个人步骤没有成功的，但愿可以指出来。我会改正并完善

本文代码地址