webpack簡單搭建localhost訪問靜態資源

前端開發過程中，靜態頁面直接雙擊HTML檔案就能在瀏覽器開啟，有時候我們很希望可以用localhost啟動，在區域網內可以直接用手機或者是別的電腦訪問。

如果你用的是框架腳手架或者你是webpack大神就不用往下看了。今天分享的只是最簡便用webpack-dev-server快速localhost訪問靜態資源。

Node環境一定要有，這個我就不說了。新建一個資料夾，注意，這邊資料夾最好不要中文，不然會報錯。然後在這個資料夾裡面用命令列開啟：

初始化：npm init -y(-y少了詢問步驟)，會自動生成package.json；

下載依賴：npm install webpack webpack-cli webpack-dev-derver -D(-D是開發時依賴)，會自動生成node_modules資料夾；

在這個目錄新建檔案webpack.config.js和src：

檢查一下是否下載了這三個依賴，開啟package.json：

然後src裡面新建main.js和其他你想建立的東西，我這邊新建了page和img資料夾，在裡面新建了一個HTML和一張圖片：

接著我們在webpack.config.js裡面配置最簡單的webpack配置：

let path = require('path');

module.exports = {

entry: './src/main.js',

mode: 'development',

devServer: {

port: 8080,

contentBase: path.join(__dirname, 'src'),

open: true

}}

想要知道這些引數的建議去webpack官網看看，挺簡單的。這邊說一下contentBase我預設指向了src資料夾。

然後在package.json裡面配置啟動命令：

接著直接npm run dev啟動，我切換到手機模式：

這邊要訪問什麼直接點選，或者地址直接相對路徑輸入：

http://localhost:8080/img/cash-logo.png

http://localhost:8080/page/

http://localhost:8080/page/index.html

就可以訪問靜態資源了（page會自動指向index.html）。

有一點webpack基礎的應該都能搭建，這邊只是分享最基礎的。搭建好了之後，以後要使用直接把檔案拉倒這個src裡面，然後用絕對路徑訪問就可以了。

（完）

Coding 個人筆記