webpack筆記三：使用 source map 以及開發環境的配置

首先配置好簡單的開發環境：

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

目錄以下：

1、在webpack中使用source map

在實際開發過程當中，咱們在使用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，查看控制檯會發現：

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

2、使用開發工具 webpack-dev-server

webpack-dev-server爲你提供了一個簡單的 web 服務器，而且可以實時從新加載(live reloading)。首先讓咱們執行 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

告訴服務器從哪裏提供內容。只有在你想要提供靜態文件時才須要。devServer.publicPath 將用於肯定應該從哪裏提供 bundle，而且此選項優先。

• devServer.host

指定使用一個 host。默認是 localhost。若是你但願服務器外部可訪問，能夠指定host: "0.0.0.0"

• devServer.port

指定要監聽請求的端口號。

• devServer.quiet

啓用 quiet 後，除了初始啓動信息以外的任何內容都不會被打印到控制檯。這也意味着來自 webpack 的錯誤或警告在控制檯不可見。

• devServer.open

在執行命令時打開瀏覽器，也能夠指定特定的瀏覽器。

• devServer.headers

在全部響應中添加頭部內容：

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

---

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