2017-01-03 11 views
0

私は本当に私はイントロhereや他のtutorialsの束を読んで、私は、個々の質問を持っているようにそれはそう...私は基本的に2つのファイルを作成することによって、次の例午前、WebPACKの点を理解していませんサイト:Webpackバンドルファイル - それは何ですか?

app.js:

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

のindex.html:

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

それから私は、たまたまバンドルファイルを、作成するために、CLIからwebpack ./app.js bundle.jsを実行します。

そう...はどのようにバンドルファイルは現在、慣れるでしょうか?それは何ですか?私はそれは、本質的にそれをuglifiedその後、単一のファイルに「すべて」をコンパイルして思ったが、それはケースのように思われない、出力に含まの一部は、このようになります(完全な出力を含めるように編集):

/******/ (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.htmlapp.jsファイルが必要ですか?

+0

あなたの 'webpack.config.js'を表示します。 – haim770

+0

モジュールバンドラはエントリファイルを取得し、すべての依存関係(ファイルがロードする他のファイル/モジュール)を決定し、それらを1つのファイル("バンドル ")に結合します。 –

答えて

3

私はあなたがリンクした最初の記事の著者です。 「バンドルされた」ファイルとは、アプリケーション/ウェブサイトを実行するために必要なJavascriptをすべて意味し、ブラウザが理解できる1つのファイルにコンパイルします。たとえば、ソースコードでrequire()またはimportステートメントを使用することができます。ブラウザはそれらをどのように実行するのか考えていないので、WebpackはすべてのJavaScriptコードを、ブラウザがエラーなしに理解して実行できる「バンドルされた」ファイルにコンパイルします。

のWebPACKは、デフォルトでは、コードを縮小化しない、あなたはuglifyプラグインを使用する必要があります。

あなたは、WebPACKのでわずか出力建てのJavascriptファイルを元のソースコードを必要としません。バンドルされたファイルを読むためにHTMLを設定する必要があります。一般的には、Webpackの2つの設定があります.1つはローカル開発用、もう1つは本番用です。

+0

まず、記事のおかげで、それは良いことです、私は本当に背景がありません。私はimport文がES5(または6)にあり、モジュールをエクスポートするjsファイルを参照するために使用できると思いました。編集:ああ、私はそれを得ると思います - 私は通常jsファイルをインポートすることができますが、私はインポートすることはできません/イメージなどが必要ですが、webpackも私を許しますか? (私はあなたの記事を読んだことを参照してください!) – VSO

+0

インポート/エクスポートステートメントは、進化するJavaScript言語の一部であり、nodejsサポートを拡張していますが、ブラウザーではサポートされていません。私は、#reactjs IRCチャンネルで多くの質問をすることをお勧めします –

+0

クール、ありがとう! // cl – VSO

関連する問題