《後端也要懂一點前端系列》使用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模板內容）在
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檔案，然後加入變數，1// 向外暴露一個打包的配置物件
2module.exports = {
3 mode: 'development',
4}
複製程式碼這裡
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配置檔案中配置如下。1const HtmlWebpackPlugin = require('html-webpack-plugin') // 匯入在記憶體中自動生成index頁面的外掛
2const path = 'path')
3
4// 建立一個外掛的例項物件
5const htmlplugin = new HtmlWebpackPlugin({
6 template: path.join(__dirname,'./src/index.html'), // 原始檔
7 filename: 'index.html'
8})
9
1011module.exports = {
12 mode: 13 plugins:[
14 htmlplugin
15 ]
16}
複製程式碼 啟動專案，直接在命令列中輸入
npm run dev即可訪問到我們的index.html頁面了。
作為一個對前端一無所知的我來說能夠啟動起來看到頁面已經是成功的邁出第一步了。接下來有時間依然會不斷的深入學習前端，當然還是以會用為主，一些原理我也不會講（當然我也不會）。畢竟主要精力還是放在後端方向的。
如果大家根據我的步驟沒有成功的，希望能夠指出來。我會改正並完善