webpack筆記三：使用 source map 以及開發(fā)環(huán)境的配置

gnehc 發(fā)布于2019-08-22 16:08 / 1532人閱讀

摘要：二使用開發(fā)工具為你提供了一個簡單的服務器，并且能夠?qū)崟r重新加載。啟用后，除了初始啟動信息之外的任何內(nèi)容都不會被打印到控制臺。這也意味著來自的錯誤或警告在控制臺不可見。在執(zhí)行命令時打開瀏覽器，也可以指定特定的瀏覽器。

首先配置好簡單的開發(fā)環(huán)境：

npm init -y
cnpm install webpack webpack-cli -D

目錄如下：

一、在webpack中使用source map

在實際開發(fā)過程中，我們在使用webpack打包的時候，打包完成的bundle.js報錯信息是很難Debug的，這時候就需要Source Map來還原真實的出錯位置。例如，如果將三個源文件（a.js, b.js 和 c.js）打包到一個 bundle（bundle.js）中，而其中a.js包含一個錯誤，那么堆棧跟蹤就會指向到 a.js。那么我們在webpack.config.js 配置

然后我們在src目錄下增加a.js, b.js 和 c.js 文件，然后在c.js里這樣寫：

console.error("出錯了！");

接著運行npm run build打開index.html，查看控制臺會發(fā)現(xiàn)：

會明確地看到出錯的位置。

二、使用開發(fā)工具 webpack-dev-server

webpack-dev-server為你提供了一個簡單的 web 服務器，并且能夠?qū)崟r重新加載(live reloading)。首先讓我們執(zhí)行 cnpm install webpack-dev-server -D 命令，然后修改webpack.config.js文件：

devServer:{
    publicPath: "/dist/",
    contentBase: "./",
    host: "127.0.0.1",
    port: 8080,
    quiet: true,
    open: true
}

我們可以對devServer進行相關配置配置詳見官方文檔，下面介紹一些簡單的配置：

devServer.publicPath

此路徑下的打包文件可在瀏覽器中訪問。假設服務器運行在 http://localhost:8080 并且 output.filename 被設置為 bundle.js。默認 publicPath 是 "/"，所以你的包(bundle)可以通過 http://localhost:8080/bundle.js 訪問。

devServer.contentBase

告訴服務器從哪里提供內(nèi)容。只有在你想要提供靜態(tài)文件時才需要。devServer.publicPath 將用于確定應該從哪里提供 bundle，并且此選項優(yōu)先。

devServer.host

指定使用一個 host。默認是 localhost。如果你希望服務器外部可訪問，可以指定host: "0.0.0.0"

devServer.port

指定要監(jiān)聽請求的端口號。

devServer.quiet

啟用 quiet 后，除了初始啟動信息之外的任何內(nèi)容都不會被打印到控制臺。這也意味著來自 webpack 的錯誤或警告在控制臺不可見。

devServer.open

在執(zhí)行命令時打開瀏覽器，也可以指定特定的瀏覽器。

devServer.headers

在所有響應中添加頭部內(nèi)容：

headers: {
  "X-Custom-Foo": "bar"
}

另附上github項目練習地址：https://github.com/zgf123/web...

云服務器 GPU云服務器 source-map java開發(fā)環(huán)境的配置 linux系統(tǒng) 如何配置java系統(tǒng)的開發(fā)環(huán)境 map集合的使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94081.html

webpack@4.32.2研究筆記【03】- devtool

摘要：簡介選項用于控制是否需要生成，以及如何生成。表示把每一個模塊文件都轉(zhuǎn)換為字符串，并且在每一個模塊代碼的尾部添加文件名，并使用執(zhí)行。通過來處理已有的。優(yōu)點是不需要建立和部署內(nèi)網(wǎng)的服務器，缺點是無法直接線上源碼。簡介 ? devtool選項用于控制是否需要生成source map，以及如何生成source map。源碼地址什么是source map？ ? source ma...

wangtdgoodluck 2019-08-23 18:01 評論0 收藏0
webpack4搭建Vue開發(fā)環(huán)境筆記~~持續(xù)更新

摘要：項目地址一知識獲取當前文件所在路徑，等同于把一個路徑或路徑片段的序列解析為一個絕對路徑給定的路徑的序列是從右往左被處理的，后面每個被依次解析，直到構(gòu)造完成一個絕對路徑如果處理完全部給定的片段后還未生成一個絕對路徑，則當前工作目錄會被用上生成項目git地址一、node知識 __dirname: 獲取當前文件所在路徑，等同于path.dirname(__filename) consol...

hankkin 2019-08-23 13:01 評論0 收藏0
webpack 項目構(gòu)建：（三）開發(fā)環(huán)境——本地服務器搭建

摘要：上一章我們了解了的編譯環(huán)境搭建項目構(gòu)建二編譯環(huán)境搭建這一章我們會結(jié)合的，介紹本地測試服務器的搭建過程。三開發(fā)環(huán)境有一些特性是專門用于開發(fā)環(huán)境的，可以幫助我們搭建一個更好的開發(fā)環(huán)境。我們可以通過配合使用來搭建本地服務。注：以下教程均在 windows 環(huán)境實現(xiàn)，使用其他操作系統(tǒng)的同學實踐過程可能會有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環(huán)境搭建：webpack...

tolerious 2019-08-22 15:10 評論0 收藏0
webpack4系列教程（九）：開發(fā)環(huán)境和生產(chǎn)環(huán)境

摘要：它允許在運行時更新各種模塊，而無需進行完全刷新。構(gòu)建生產(chǎn)環(huán)境開發(fā)環(huán)境和生產(chǎn)環(huán)境的構(gòu)建目標差異很大。在開發(fā)環(huán)境中，我們需要具有強大的具有實時重新加載或熱模塊替換能力的和。 1. 構(gòu)建開發(fā)環(huán)境如果你一直跟隨我前面的博文，那么你對webpack的基礎知識已經(jīng)有比較深刻的理解了。之前，我們一直執(zhí)行著： npm run build 來打包編譯輸出我們的代碼，本文我們來看看如何構(gòu)建一個開發(fā)環(huán)境，...

姘存按 2019-08-23 14:48 評論0 收藏0
vue-cli#4.7項目結(jié)構(gòu)分析

摘要：前言使用過進行項目開發(fā)的同學，一定知道或者使用過腳手架，他能夠很好的搭建項目結(jié)構(gòu)和工程，讓我們能夠把足夠的精力放在業(yè)務開發(fā)上。對象提供一系列屬性，用于返回系統(tǒng)信息返回當前進程的命令行參數(shù)數(shù)組。前言使用過 vue 進行項目開發(fā)的同學，一定知道或者使用過 vue-cli 腳手架，他能夠很好的搭建項目結(jié)構(gòu)和工程，讓我們能夠把足夠的精力放在業(yè)務開發(fā)上。也正是因為這樣，很多時候我們會因為項目...

EastWoodYang 2019-08-22 17:09 評論0 收藏0