《后端也要懂一点前端系列》使用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中打开命令行，怎么打开如下图所示。

  image

• 打开后再命令行输入 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页面了。

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

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

本文代码地址

有感兴趣的可以关注一下我新建的公众号，搜索[程序猿的百宝袋]。或者直接扫下面的码也行。

image