webpack入門筆記——其他配置

前往懸崖下尋寶的神三算จุ๊บ發表於2018-05-11
Web筆記

devtool

開發工具，可見供開發時使用的，生成時註釋

devtool: 'inline-source-map'
複製程式碼

打包後的js不易閱讀，而且也不知道是哪個js打包過來的程式碼，總之報錯後不易定位。

配置 inline-source-map 工具後，報錯會指定錯誤位置和所屬檔案

devServe

devServe 可以提供個本地伺服器，並實現程式碼修改後自動打包，web自動重新整理

1 . 安裝

cnpm install  webpack-dev-server --save-dev
複製程式碼

2 . 配置

//不需要引入
devServer: {
    contentBase: './dist'
}
複製程式碼

建立一個本地伺服器，通過 localhost:8080 訪問

contentBase 指伺服器根目錄

  1. 配置快速啟動

為了方便在命令列裡快速啟動伺服器，配置個啟動指令碼

//package.json
"scripts": {
    "start": "webpack-dev-server --open"
}
複製程式碼

配置好後使用 npm start 即可啟動伺服器

相關文章