雖然33+歲了，但爲了生活還得必須不斷地學習，避免被餓死，生活就是這麼殘酷，也不知道今天學的以後還用不用得上。前段時間學習了spring系列，算是入門了。現在準備好好學一下vue的開發，做了這麼多年前後端，也沒做過大型的vue項目，感覺是該學習一下。不錯的框架。
安裝了nodejs，然後濛濛頓頓npm安裝了webpack 4.4版本，打開webstorm寫了幾個js。準備webpack ./src/xxx.js /dist/sss.js的時候報錯了。完成和視頻上的不一樣。視頻上面的webpack版本低。與是看了看官網，要配置，也不知道怎麼配置。找了一篇文檔，摘錄了部分記下來，雖然記錄這些東西有點浪費時間，但爲了以後需要的時候找不到解決方案，也就記下了：
安裝nodejs不用說了，js的運行環境，找個單獨的目錄，以後好管理。然後全局安裝webpack，npm install webpack安裝最新，後面加@可以指定版本。有項目了再項目裏搞一個局部安裝，爲什麼？到時候一起打包用唄
先創建項目目錄結構，根目錄是mywebpack。進入項目根目錄，執行：npm init，生成package.json文件，內容就是一堆json數據，基本就是在終端裏輸入的信息。
進入項目根目錄局部安裝webpack，進入./mywebpack，執行：npm install webpack --save-dev，局部安裝webpack成功了，根目錄下會出現一個node_modules文件夾。進入根目錄，建兩個文件夾，分別爲src和dist
（1）src文件夾：用來存放我們編寫的javascript代碼，可以簡單的理解爲用JavaScript編寫的模塊。
（2）dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。
然後寫一下js文件，html文件，自己寫吧，有依賴關係就可以。在根目錄新建一個webpack.config.js文件，然後開始配置：
const path = require('path');
module.exports={
//入口文件的配置項
entry:{
entry:'./src/index.js'
},
//出口文件的配置項
output:{
//輸出的路徑，用了Node語法
path:path.resolve(__dirname,'dist'),
//輸出的文件名稱
filename:'bundle.js'
},
mode:"development",//注意最新版本必須加mode，否則會報錯
//模塊：例如解讀CSS,圖片如何轉換，壓縮
module:{},
//插件，用於生產模版和各項功能
plugins:[],
//配置webpack開發服務功能
devServer:{}
}
然後在終端輸入：webpack，進行打包，之後我們就可以在disc目錄下看到打包生產的bundle.js文件，並能成功運行index.html文件。就好了。會指定目錄下生產打包後的js文件。