《後端也要懂一點前端系列》使用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頁面了。

做爲一個對前端一無所知的我來講可以啓動起來看到頁面已是成功的邁出第一步了。接下來有時間依然會不斷的深刻學習前端，固然仍是以會用爲主，一些原理我也不會講（固然我也不會）。畢竟主要精力仍是放在後端方向的。

若是你們根據個人步驟沒有成功的，但願可以指出來。我會改正並完善

本文代碼地址