51

私は Node/NPM/Webpack の世界全体に慣れていないので、これが明らかな場合はお詫びします。

Webpack にバンドルされた単純なフロントエンド プロジェクトを構築しようとしています。ノードがインストールされ、package.json ファイルが構成されています。ルート ディレクトリで「npm start」を実行すると、コンソールからエラーは表示されず、ブラウザで「localhost:3000」に移動して、「hello, world」の出力を確認できます。

次のタスクは、次のように、画像への参照を含むスタイルシートを含めることです。

.myimg {background: url(path/to/file.jpg);}

このように設定すると、webpack-dev-server 経由で (Web ブラウザーで localhost:3000 に移動して) イメージを表示できますが、プロジェクトをビルドすると、イメージへのパスが間違っています。何が間違っているのかわからないので、誰かが私がしていることを愚かなことだと知ってくれることを期待して、これを Stackiverse に投げ出しています。

これが私のpackage.jsonファイルです：

{
  "name": "webpack-test1",
  "version": "0.0.1",
  "description": "My project WTF.",
  "private": true,
  "scripts": {
    "start": "node server.js"
  },
  "devDependencies": {
   "css-loader": "^0.15.2",
   "file-loader": "^0.8.4",
   "style-loader": "^0.12.3",
   "url-loader": "^0.5.6"
  },
  "dependencies": {
    "webpack": "^1.9.6",
    "webpack-dev-server": "^1.8.2"
  }
}

...そしてここに私のwebpack.config.jsファイルがあります:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    "./src/start.js"
],
output: {
    filename: "bundle.js",
    path: path.join(__dirname, 'build'),
    publicPath: '/build/'
},
module: {
    loaders: [
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /\.(png|jpg)$/, loader: 'file-loader' }
    ]
}

};

...そして index.html ファイル:

<!doctype html>
<html>
<head>
    <title>Webpack Test</title>
</head>

<body>
    <div class="imgtest">hello, world</div>
    <script src="build/bundle.js"></script>
</body>
</html>

...構成ファイルで参照される「start.js」ファイル:

require('./test.css');
console.log("y u no work?");

...そして最後に、css ファイル自体の内容:

.imgtest { background: url(img/volcano.jpg);}

冒頭で述べたように、webpack-dev-server の世界では、画像へのパスが適切に解決され、DOM 要素の背景として表示されます。公開された世界では、ブラウザはファイルが見つからないことを教えてくれ、Safari のコンソールには明らかに不正なファイル パスが表示されます。

http://localhost/build/1b05d814aa13ac035c6b122b9f5974f8.jpg

正しいローカル パスは次のとおりです。

http://localhost/~username/webpack1/build/1b05d814aa13ac035c6b122b9f5974f8.jpg

明らかに、私は何か間違ったことをしているのですが、何が原因なのかわかりません。ヘルプやアドバイスをいただければ幸いです。

ありがとう！

4

2 に答える 2

32

わかりました...うーん。私はちょうどそれを理解しました。問題は、webpack.config.js 内の「publicPath」変数にありました。私はこれを持っていました：

publicPath: '/build/'

...振り返ってみると、これは明らかに絶対パスです。代わりに必要だったのはこれでした：

publicPath: './build/'

...これは相対パスです。物事は今うまくいくようです。

アップデート：

私はまだ Webpack に非常に慣れていないので、これはまだかなり混乱しています。そうは言っても...

私はこれについて間違った方法で行ったと思います。私のWebpackプロジェクトには、プロジェクトのルートにindex.htmlファイルがあり、それをwebpack-dev-serverがヒットするファイルとビルドがエントリポイントとして使用するファイルの両方として使用しようとしていました。それは私を頭痛の種にしていました.そして、私が思いついた解決策は本当にうまくいったとは思いません. それから私はこれを見つけました：

https://www.npmjs.com/package/html-webpack-plugin

これにより、テンプレートから index.html ページを作成できます。つまり、実際にファイルとして存在する必要はありません。webpack-dev-server はその場で作成してメモリに保存します。「ビルド」フォルダーに公開すると、そのフォルダー内に index.html ファイルが作成されます。

ここで提起した問題を処理するための真の「正しい」方法があるかもしれませんが、これは非常にうまく機能しているようであり、迂回的な方法で問題を解決します。

とにかく、これは一種のとりとめのないものです。それが誰かの助けになることを願っています、そして/または、これについてもっと知っている誰かがここに来て、私を正してくれることを願っています.

于 2015-07-21T21:05:36.453 に答える