webpack開發工具

高璐發布于2019-04-23 13:12 / 2832人閱讀

摘要：用來調試打包后的代碼現在在瀏覽器打開最終生成的文件，點擊按鈕，并且在控制臺查看顯示的錯誤。錯誤應該如下我們可以看到，此錯誤包含有發生錯誤的文件和行號的引用。這是非常有幫助的，因為現在我們知道了，所要解決的問題的確切位置。

source map

用來調試打包后的代碼

  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")
    }
  };
 現在在瀏覽器打開最終生成的 index.html 文件，點擊按鈕，并且在控制臺查看顯示的錯誤。錯誤應該如下： 
   Uncaught ReferenceError: cosnole is not defined
    at HTMLButtonElement.printMe (print.js:2)
 我們可以看到，此錯誤包含有發生錯誤的文件（print.js）和行號（2）的引用。這是非常有幫助的，因為現在我們知道了，所要解決的問題的確切位置。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1560.html

webpack 項目構建：（三）開發環境——本地服務器搭建

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

tolerious 2019-08-22 15:10 評論0 收藏0
基于webpack構建的angular 1.x 工程（一）webpack篇

摘要：基于構建的工程一篇現在都已經出到的版本了，可我對它的認識還是停留在的版本。然后是寫啟動的命令行，也就是上面的這樣寫的意思是，當你輸入你的命令名字就會讓執行你對應命令的語句。我們首先把基本的配置引進來。基于webpack構建的angular 1.x 工程（一）webpack篇 ??現在AngularJS都已經出到4.x的版本了，可我對它的認識還是停留在1.x的版本。 ??之前用它是為...

Anleb 2019-08-21 17:23 評論0 收藏0
webpack多頁應用架構系列（七）：開發環境、生產環境傻傻分不清楚？

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

paulquei 2019-08-20 11:09 評論0 收藏0
如何打造一個令人愉悅的前端開發環境（四）

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

StonePanda 2019-08-20 12:03 評論0 收藏0
如何打造一個令人愉悅的前端開發環境（四）

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

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

摘要：資源哈希編碼使用可以為每個包的名稱注入一個哈希值例如，，以便在版本更新后使客戶端上舊版本的包無效重新下載。如此受人喜愛的原因之一是熱模塊更換。可以為文件名生成哈希值，在內容更改時，可以作廢瀏覽器緩存中上個版本的包。原文鏈接：https://survivejs.com/webpack...翻譯計劃：https://segmentfault.com/a/11... 涉及到的未翻譯單詞 ...

tainzhi 2019-08-23 10:59 評論0 收藏0