在 webpack 开发服务器中提供静态资产 [英] Serving static assets in webpack dev server

问题描述

我从项目的根文件夹运行 webpack-dev-server.我在 /src/assets 中有 assets 文件夹，由 CopyWebPackPlugin 复制:

I run webpack-dev-server from the root folder of my project. I have assets folder in /src/assets that is copied by CopyWebPackPlugin:

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

如果我将 logo.png 放在 assets 文件夹中，那么在运行 webpack-dev-server 后，我无法访问 http://localhost/assets/logo.png 文件，但可以访问 http://localhost/src/assets/logo.png 文件.但是，如果我在生产模式下运行，情况就会颠倒过来.

If I put logo.png inside assets folder then After running webpack-dev-server I can't access http://localhost/assets/logo.png file, but can access http://localhost/src/assets/logo.png file. However if I run in production mode the situation turns upside down.

如何配置webpack服务器来制作http://localhost/assets/logo.png文件可在开发模式下访问?

How to configure webpack server to make http://localhost/assets/logo.png file accessible in development mode?

推荐答案

当从浏览器加载时，你可以告诉 webpack 使用不同的路径.

You can tell webpack to use a different path when loading from the browser.

在你的 webpack 配置文件的 output 部分添加一个 publicPath 字段指向您的 assets 文件夹.

In the output section of your webpack config file add a publicPath field pointing to your assets folder.

webpack.config.js

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

这篇关于在 webpack 开发服务器中提供静态资产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！