前言：
因為最近正在做前端開發，發現公司里面用的都是vue了。反而最原始的html+css+js這種已經很少見了。有時候自己會做一些練習的小項目，如果按照vue腳手架來一遍的話，不僅搭建起來需要各種插件，而且項目打包出來后不管是體積還是性能都有些問題。因此，我想着自己就搭建一個簡單的，可以快速實現前端開發的架子。
實現目標：js，css分離，熱更新代碼，靜態資源服務器
1.基礎環境
安裝nodejs，vscode，這是最基本的配置了
2.初始化項目
創建目錄，運行 npm init -y,初始化npm項目工程，此時就可以隨意使用npm包進行開發了。
3.使用webpack
為什么要webpack呢？因為我們需要源碼進行編譯，需要開啟服務，需要熱更新，如果自己寫的話需要大量時間。因此直接用webpack。
安裝webpack，npm i webpack webpack-cli -D
4.webpack基本概念
知道webpack的基本概念：入口，出口，加載器，插件；
增加webpack.config.js文件，這個是默認加載的。
此時項目樣子：
5.webpack配置
webpack.config.js里面添加基本的配置，入口，出口
const path = require('path');
const config = {
entry:"./src/main.js",
output:{
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module:{
}
}
module.exports = config;
到目前為止，基礎的js開發環境已經搭好了。
6.入口html文件
我們創建html文件，將js引入進去
運行，
基礎的為本項目搭建完畢。可是此時並沒有體現出工作流程的優越性。
- 我們需要自己手動添加js的引用
- 我們運行項目的時候還需要手動刷新打開
- 我們需要手動編譯
7.熱更+靜態資源服務
引入webpack-dev-serverdev-server
npm install webpack-dev-server --save-dev
注意這個，必須填寫，路徑必須寫對，不然不生效
8.html-webpack-plugin
剛剛我們創建的項目，html是我們手動創建，並且加入js的。
這里我們使用另外一個插件，來解決這個問題；
嘗試更改filename到dist目錄，不行，因此把publicPath，contentBase改成了根目錄，
這個時候插件才能成功
注意各種路徑，非常容易配置錯誤，簡易直接下載腳手架來拷貝。
9.css文件
缺了個css，我們加入css。
css要在js文件里進行導入
import "./main.css";
console.log("你好");
然后生成的結果：
樣式是內嵌到代碼里面的；
再來一個插件extract-text-webpack-plugin
上面實現了基本的html+css+js開發的條件。
webpack配置的時候一定要注意路徑的配置，可能控制台不報錯，但是項目跑起來后瀏覽器里面就有問題。因此建議先拷貝代碼，然后對比自己寫的。此外，還有各種版本兼容問題。注意！！！
我們看到，為了實現現代前端，我們新增了很多工具來完成開發；webpack現在越來越復雜了，配置項讓人眼花繚亂，各種插件層出不窮。
然而，基本的架子，上面都已經可以滿足了。如果有更多需求，只能增加各種配置了。
吐槽：webpack功能越來越強大，但是沒用的東西也越來越多。讓人感覺頭大。