在 webpack 开发服务器中提供静态资源

Question

I 运行 webpack-dev-server 来自我项目的根文件夹。我在 /src/assets 中有 assets 文件夹，由 CopyWebPackPlugin:

复制

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

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

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

Answer 1

您可以告诉 webpack 在从浏览器加载时使用不同的路径。

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

webpack.config.js

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

Answer 2

我要补充一点，这对我来说恰恰相反。我最初将图像和 .obj/.mtl 文件放在应用程序根目录下的 public 文件夹中。我将它们移动到在 app 文件夹中创建的 assets 文件夹中。

执行 npm install --save-dev copy-webpack-plugin 并添加

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

webpack.common.js 文件解决了我的问题。

Answer 3

我使用代理：

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

Answer 4

你可以这样做：

const path = require('path');
const express = require('express');

module.exports = {
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      devServer.app.use('/assets/', express.static(path.resolve(__dirname, 'src/assets')));
      return middlewares;
    }
  }
}

我的情况是从项目根路径之外提供文件，然后 CopyWebpackPlugin 感觉是错误的方法。

如果您使用的是 webpack-dev-server >=4,<4.7 则为 onBeforeSetupMiddleware 或使用 v3 为 devServer.before.

Answer 5

更新 (webpack-dev-server 4)

自最新版本以来。您必须将 contentBasePublicPath 和 contentBase（请参阅下面的原始解决方案）替换为 static.directory 和 static.publicPath。该功能仍然有效。

webpack.config.js

{
  devServer: {
    static: { 
      directory: path.resolve(__dirname, './assets'), 
      publicPath: '/assets'
    }
  }
}

测试 webpack 5.58.2、webpack-cli 4.9.0、webpack-dev-server 4.3.1。

继续阅读原始解决方案以获取更多信息。

原始 (webpack-dev-server 3)

对于想要真正的静态文件而不复制它们并登陆这里的每个人。 Webpack 输出配置 publicPath 不起作用。

您需要 DevServer 属性 contentBase 和可选 contentBasePublicPath.

文档确实缺少这些属性。那么让我解释一下：

用例：您想使用视频、声音和图像等静态文件而不复制它们。在此示例中，在您的项目根目录中创建一个文件夹 assets。其余配置默认(src, dist).

webpack.config.js

{
  devServer: {
    contentBase: path.resolve(__dirname, './assets'),
    contentBasePublicPath: '/assets'
  }  
}

没有 contentBasePublicPath 可以使用 root URL 访问资产。由于 contentBase 仅定义文件夹内容。

例子：将图像文件“test.png”放入您的资产文件夹。

如果没有 contentBasePublicPath，您可以使用例如<img src="test.png">。使用 contentBasePublicPath 您可以使用 <img src="assets/test.png">.

your-project
|- assets
|  |- test.png
|- dist (...)
|- src (...)

您可以使用任何您想要的路径。例如。将资产移动到您的 src 文件夹。只需将所有资产放在这里。它不会被构建处理/触及。并且该应用程序仍在从默认根 (dist) 路径加载。这就是我们想要的。我认为最简单最好的解决方案。

已使用 TypeScript 项目和 Webpack 5（webpack-cli 4、webpack-dev-server 3）进行测试。

在 webpack 开发服务器中提供静态资源

Serving static assets in webpack dev server

webpack

webpack-dev-server