在webpack dev服务器中提供静态资产

Question

我从项目的根文件夹运行webpack-dev-server.我在/ src/assets中有一个由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文件.但是,如果我在生产模式下运行,情况会颠倒过来.

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

Answer 1

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

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

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

到webpack.common.js文件修复了我的问题.

Answer 2

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

在outputwebpack配置文件的部分中添加publicPath指向您的assets文件夹的字段.

webpack.config.js

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

Answer 3

更新（webpack-dev-server 4）

从最新版本开始。您必须将contentBasePublicPathand contentBase（参见下面的原始解决方案）替换为static.directoryand 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资产，则可以通过根 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）进行测试。

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.