Webpackを使用している場合、どのフォルダを静的に使用していますか？

は私が（私の上司が私を作っている）したいと仮定すると、使用のWebPACK、と私は同じようなファイル構造を持っている：WebPACKのは、どのように、srcフォルダをコンパイル/バンドルの結果を出力するところbuildsであることを特徴とする請求Webpackを使用している場合、どのフォルダを静的に使用していますか？

index.htmlがbundle.js（サーバー上にある場合）、つまりexpress.static()で公開するフォルダを指していますか？これを行うには正しい "webpack"の方法、つまり以下のような簡単なwebpack.configは何ですか？私はこれがどのように機能するかについて何か基本的なものを欠いていますか理想的には私は私のindex.html

<html> 
<script src='bundle.js'></script> 
<!-- bundle.js spits a bunch of CSS into the html, dynamically builds elements, etc --> 
</html>

や物事はWebPACKの中で行われていないかということで、以下のような何かをしたいのですが？

webpack.config.js

module.exports = { 
    entry: './src/index.js', 
    output: { 
     path:  'builds', 
     filename: 'bundle.js', 
    }, 
    module: { 
     loaders: [ 
      { test: /\.css$/, 
       loader: "style!css" 
      } 
     ] 
    } 
};

私はthe docsとthis oft-linked articleを経由してこれを理解しようとしています。

出典

2016-09-24 komali_2

エクスプローラを備えたnodejsは、ノードの構造をエンドユーザーに公開しないでWebエクスプロイトのチャンスを作り出すことをお勧めします。何ができることは次に、あなたのWebPACK

app.use('/buidscript', express.static(__dirname + '/builds/'));

この方法を公開している、/buidscript/bundle.jsから任意のブラウザ要求は自動的にディレクトリを作成しますからフェッチされます。

<script src='/buidscript/bundle.js'></script>

ここでは、あなたの好きなようにあなたの考えを集めることができます。あなたは

app.use(express.static(__dirname + '/builds'));

を探しているあなたの理想的なケースでは

は今どんな要求bundle.jsが露出静的で検索されるように、あなたが

<script src='bundle.js'></script>

を使用することができ、ディレクトリ

追加を構築しますそれをpackage.jsonのスクリプト

“scripts”: { 
“start”: “webpack-dev-server --content-base build/ --inline --hot”, 
... 
} 
// Use it by running 
$ npm start

これで、開発モードでindex.htmlを実行する前に、bundle.jsがビルドされます。

--content-base build/

あなたのビルドフォルダに静的ファイルを保存します。そうすれば、bundle.jsを直接利用することができます。ファイルの変更を探し、bundle.jsを再コンパイルします。

出典

2016-09-24 03:21:24 Cyclotron3x3

はい、まさしく私の言いたいことです。 '/ builds'を公開すると、' bundle.js'にクライアントからアクセスすることができます。しかし、 'index.html'はできません。もし私が' index.html'をサーバーしていれば、 'bundle.js'にアクセスすることはできません。 –

あなたの提案があれば、' builds'フォルダをコピーそこに私の 'index.html'ファイルを置いて、そこに' bundle.js'ファイルを追加します。 –

私はまだindex.htmlがbundle.jsにアクセスできない理由を知りませんでした。 webpackを使用する場合、開発環境と本番環境を区別する必要があります。更新された答え – Cyclotron3x3

Webpackを使用している場合、どのフォルダを静的に使用していますか？

答えて

関連する問題