webpack開發(fā)工具

高璐發(fā)布于2019-04-23 13:12 / 2841人閱讀

摘要：用來調(diào)試打包后的代碼現(xiàn)在在瀏覽器打開最終生成的文件，點(diǎn)擊按鈕，并且在控制臺(tái)查看顯示的錯(cuò)誤。錯(cuò)誤應(yīng)該如下我們可以看到，此錯(cuò)誤包含有發(fā)生錯(cuò)誤的文件和行號(hào)的引用。這是非常有幫助的，因?yàn)楝F(xiàn)在我們知道了，所要解決的問題的確切位置。

source map

用來調(diào)試打包后的代碼

  const path = require("path");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const CleanWebpackPlugin = require("clean-webpack-plugin");

  module.exports = {
    entry: {
      app: "./src/index.js",
      print: "./src/print.js"
    },
+   devtool: "inline-source-map",
    plugins: [
      new CleanWebpackPlugin(["dist"]),
      new HtmlWebpackPlugin({
        title: "Development"
      })
    ],
    output: {
      filename: "[name].bundle.js",
      path: path.resolve(__dirname, "dist")
    }
  };
 現(xiàn)在在瀏覽器打開最終生成的 index.html 文件，點(diǎn)擊按鈕，并且在控制臺(tái)查看顯示的錯(cuò)誤。錯(cuò)誤應(yīng)該如下： 
   Uncaught ReferenceError: cosnole is not defined
    at HTMLButtonElement.printMe (print.js:2)
 我們可以看到，此錯(cuò)誤包含有發(fā)生錯(cuò)誤的文件（print.js）和行號(hào)（2）的引用。這是非常有幫助的，因?yàn)楝F(xiàn)在我們知道了，所要解決的問題的確切位置。

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

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

相關(guān)文章

webpack 項(xiàng)目構(gòu)建：（三）開發(fā)環(huán)境——本地服務(wù)器搭建

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

tolerious 2019-08-22 15:10 評(píng)論0 收藏0
基于webpack構(gòu)建的angular 1.x 工程（一）webpack篇

摘要：基于構(gòu)建的工程一篇現(xiàn)在都已經(jīng)出到的版本了，可我對(duì)它的認(rèn)識(shí)還是停留在的版本。然后是寫啟動(dòng)的命令行，也就是上面的這樣寫的意思是，當(dāng)你輸入你的命令名字就會(huì)讓執(zhí)行你對(duì)應(yīng)命令的語句。我們首先把基本的配置引進(jìn)來。基于webpack構(gòu)建的angular 1.x 工程（一）webpack篇 ??現(xiàn)在AngularJS都已經(jīng)出到4.x的版本了，可我對(duì)它的認(rèn)識(shí)還是停留在1.x的版本。 ??之前用它是為...

Anleb 2019-08-21 17:23 評(píng)論0 收藏0
webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？

摘要：開發(fā)環(huán)境和生產(chǎn)環(huán)境都擁有的配置，但在細(xì)節(jié)上有所不同，比如說，又比如說中的和參數(shù)。更重要的是，實(shí)際上開發(fā)環(huán)境和生產(chǎn)環(huán)境的配置文件的絕大部分都是一致的，對(duì)于這一致的部分來說，我們堅(jiān)決要消除冗余，否則后續(xù)維護(hù)起來不僅麻煩，而且還容易出錯(cuò)。本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/11900...

paulquei 2019-08-20 11:09 評(píng)論0 收藏0
如何打造一個(gè)令人愉悅的前端開發(fā)環(huán)境（四）

摘要：在前后端分離的前端項(xiàng)目開發(fā)中經(jīng)常用到。是的一個(gè)中間件。即是一個(gè)重要的功能。配置先來在配置文件中引入添加一個(gè)和通信的客戶端添加應(yīng)用入口文件在插件中引入在我們的開發(fā)環(huán)境中是這樣配置的。原文鏈接此文是我同事寫的，搭建Express結(jié)合Webpack。以下是正文，后面我會(huì)附上我的解讀 Express 結(jié)合 Webpack 實(shí)現(xiàn)HMR 本篇文件主要講結(jié)合 Webpack 和 Express 實(shí)...

StonePanda 2019-08-20 12:03 評(píng)論0 收藏0
如何打造一個(gè)令人愉悅的前端開發(fā)環(huán)境（四）

摘要：在前后端分離的前端項(xiàng)目開發(fā)中經(jīng)常用到。是的一個(gè)中間件。即是一個(gè)重要的功能。配置先來在配置文件中引入添加一個(gè)和通信的客戶端添加應(yīng)用入口文件在插件中引入在我們的開發(fā)環(huán)境中是這樣配置的。原文鏈接此文是我同事寫的，搭建Express結(jié)合Webpack。以下是正文，后面我會(huì)附上我的解讀 Express 結(jié)合 Webpack 實(shí)現(xiàn)HMR 本篇文件主要講結(jié)合 Webpack 和 Express 實(shí)...

animabear 2019-08-01 15:54 評(píng)論0 收藏0
什么是 Webpack？【Webpack Book 翻譯】

摘要：資源哈希編碼使用可以為每個(gè)包的名稱注入一個(gè)哈希值例如，，以便在版本更新后使客戶端上舊版本的包無效重新下載。如此受人喜愛的原因之一是熱模塊更換?？梢詾槲募晒Ｖ?，在內(nèi)容更改時(shí)，可以作廢瀏覽器緩存中上個(gè)版本的包。原文鏈接：https://survivejs.com/webpack...翻譯計(jì)劃：https://segmentfault.com/a/11... 涉及到的未翻譯單詞 ...

tainzhi 2019-08-23 10:59 評(píng)論0 收藏0