Webpack捆綁文件 - 它有什麼作用？

我真的不明白WebPack的觀點，我讀了一個介紹here和一堆其他tutorials，但它似乎我不得不問個別問題......我正在通過創建2個基本文件現場：Webpack捆綁文件 - 它有什麼作用？

app.js：

document.write('welcome to my app'); 
console.log('app loaded');

的index.html：

<html> 
    <body> 
    <script src="bundle.js"></script> 
    </body> 
</html>

然後我跑webpack ./app.js bundle.js從CLI創建包文件，這恰好。

那麼...現在如何使用軟件包文件？它是什麼？我認爲這基本上是編制了「一切」到一個單一的文件，然後變醜了，但似乎並沒有這樣的情況，一些輸出中的看起來像這樣（編輯成包括全輸出）：

/******/ (function(modules) { // webpackBootstrap 
/******/ // The module cache 
/******/ var installedModules = {}; 

/******/ // The require function 
/******/ function __webpack_require__(moduleId) { 

/******/  // Check if module is in cache 
/******/  if(installedModules[moduleId]) 
/******/   return installedModules[moduleId].exports; 

/******/  // Create a new module (and put it into the cache) 
/******/  var module = installedModules[moduleId] = { 
/******/   exports: {}, 
/******/   id: moduleId, 
/******/   loaded: false 
/******/  }; 

/******/  // Execute the module function 
/******/  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 

/******/  // Flag the module as loaded 
/******/  module.loaded = true; 

/******/  // Return the exports of the module 
/******/  return module.exports; 
/******/ } 


/******/ // expose the modules object (__webpack_modules__) 
/******/ __webpack_require__.m = modules; 

/******/ // expose the module cache 
/******/ __webpack_require__.c = installedModules; 

/******/ // __webpack_public_path__ 
/******/ __webpack_require__.p = ""; 

/******/ // Load entry module and return exports 
/******/ return __webpack_require__(0); 
/******/ }) 
/************************************************************************/ 
/******/ ([ 
/* 0 */ 
/***/ function(module, exports) { 

    document.write('welcome to my app'); 

    console.log('app loaded'); 

/***/ } 
/******/ ]);

那麼，有什麼意義？應用程序可以從這個軟件包文件運行嗎？該軟件包是否以某種方式被引用？捆綁包一旦建成，我還需要原始的i ndex.html和app.js文件嗎？

來源

2017-01-03 VSO

顯示您的'webpack.config.js' – haim770

模塊打包程序獲取一個條目文件，確定它的所有依賴關係（即文件加載的其他文件/模塊），並將它們合併成一個文件（「包」）。 –

我是你鏈接的第一篇文章的作者。「捆綁」文件只是表示您的應用程序/網站需要運行的所有Javascript，並將其編譯爲瀏覽器可以理解的一個文件。例如，在您的源代碼中，您可能使用require()或import語句。瀏覽器不知道如何執行這些，所以Webpack會將你所有的Javascript代碼編譯成一個「捆綁」的文件，瀏覽器可以理解並執行而不會出錯。

默認情況下，Webpack不會縮小代碼，您必須使用uglify插件。

您不需要原始的源代碼，只需要Webpack輸出的JavaScript文件即可。您需要設置您的HTML以閱讀捆綁文件。通常你有兩個Webpack配置，一個用於本地開發，一個用於生產部署。

來源

2017-01-03 19:30:05

首先，感謝這篇文章 - 這很好，我只是沒有真正的背景。我認爲導入語句是ES5（或6），可以用來引用輸出模塊的js文件，不是嗎？編輯：哦，我想我得到它 - 我通常可以導入js文件，但我無法導入/需要圖像等，但webpack也允許我嗎？（請參閱我讀過您的文章！） – VSO

導入/導出語句是不斷髮展的JavaScript語言的一部分，並且具有越來越多的nodejs支持，但不受瀏覽器支持。 stackoverflow不適合來回討論，我建議在#reactjs IRC頻道 –

問更多問題很酷，謝謝！ // CL – VSO

Webpack捆綁文件 - 它有什麼作用？

回答

相關問題