web-dev-qa-db-ja.com

webpack devサーバーで静的アセットを提供する

プロジェクトのルートフォルダーからwebpack-dev-serverを実行します。 CopyWebPackPluginによってコピーされた/ src/assetsフォルダーにassetsフォルダーがあります：

new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ])

logo.pngをAssetsフォルダー内に配置すると、webpack-dev-serverを実行した後、アクセスできません- http：//localhost/assets/logo.pngファイルですが、アクセスできるのはhttp：// localhost/src/assets/logo.pngファイル。ただし、実稼働モードで実行すると、状況が逆さまになります。

開発モードでhttp：//localhost/assets/logo.pngファイルにアクセスできるようにwebpackサーバーを設定する方法は？

webpackwebpack-dev-server
49
Rem

ブラウザからロードするときに、webpackに異なるパスを使用するように指示できます。

Webpack構成ファイルのoutputセクションに、publicPathフォルダーを指す assets フィールドを追加します。

webpack.config.js

output: {
  // your stuff
  publicPath: '/assets/'
}
21
dreyescat

それは私にとって反対だったと付け加えます。元々、画像と.obj/.mtlファイルは、アプリケーションのルートにあるpublicフォルダーにありました。それらをassetsフォルダーに作成されたappフォルダーに移動しました。

npm install --save-dev copy-webpack-pluginの実行と追加

new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ])

webpack.common.jsファイルに追加すると、問題が修正されました。

36
Katana24

私はプロキシを使用します：

proxy: {
  '/static': {
      target: 'http://localhost:3333',
      pathRewrite: {'^/static' : '/app/static'}
   }
}
1
insub