在 webpack 开发服务器中提供静态资源
Posted
技术标签:
【中文标题】在 webpack 开发服务器中提供静态资源【英文标题】:Serving static assets in webpack dev server 【发布时间】:2016-04-24 13:52:17 【问题描述】:我从项目的根文件夹运行 webpack-dev-server。 我在 /src/assets 中有 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 文件在开发模式下可访问?
【问题讨论】:
【参考方案1】:你可以告诉 webpack 在从浏览器加载时使用不同的路径。
在您的 webpack 配置文件的 output
部分添加一个指向您的 assets
文件夹的 publicPath
字段。
webpack.config.js
output:
// your stuff
publicPath: '/assets/'
【讨论】:
任何人都可以发布完整的工作 webpack.config.js 吗?以及他们正在使用的 copy-webpack-plugin 的版本? 这快把我逼疯了!非常感谢您的回答! @TonyGutierrez 你还需要一个例子吗?很高兴分享我的。 btw @TonyGutierrez 你总是可以使用 create-react-app 创建一个 React 应用程序,然后你可以将其弹出。 webpack dev/prod 配置将在 config 目录中。 Facebook 擅长添加内联符号并保持这些配置是最新的。 那么你不能在你的项目根目录中使用该配置提供默认的 index.html 页面。【参考方案2】:我要补充一点,这对我来说正好相反。我最初将图像和.obj/.mtl
文件放在应用程序根目录下的public
文件夹中。我将它们移动到在app
文件夹中创建的assets
文件夹中。
执行npm install --save-dev copy-webpack-plugin
并添加
new CopyWebpackPlugin([ from: 'src/assets', to: 'assets' ])
webpack.common.js
文件解决了我的问题。
【讨论】:
谢谢,给了我我需要的东西。在我的情况下,publicPath
需要为/
才能正确构建我的index.html
文件,但我需要/static/
中的静态文件。这对它进行了排序。
这里和我已经在使用 publicpath 做其他事情一样,效果很好!
作为记录,是的,这个插件可以与 webpack 开发服务器一起使用!这个名字有点令人困惑,因为它不必从字面上复制文件。【参考方案3】:
我使用代理:
proxy:
'/static':
target: 'http://localhost:3333',
pathRewrite: '^/static' : '/app/static'
【讨论】:
this feature is available with react-scripts@0.2.3 and higher.
create-react-app.dev/docs/proxying-api-requests-in-development【参考方案4】:
你可以这样做:
const path = require('path');
const express = require('express');
module.exports =
devServer:
before: (app) =>
app.use('/assets/', express.static(path.resolve(__dirname, 'src/assets')));
我的情况是从项目根路径之外提供文件,然后CopyWebpackPlugin
感觉是错误的方法。
更新:如果您使用的是 webpack-dev-server v4,它是 devServer.onBeforeSetupMiddleware
而不是 devServer.before
【讨论】:
谢谢!这对我有帮助。我找到的最简单的解决方案。【参考方案5】:更新(webpack-dev-server 4)
从最新版本开始。您必须用static.directory
和static.publicPath
替换contentBasePublicPath
和contentBase
(参见下面的原始解决方案)。该功能仍然有效。
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)进行了测试。 ?
【讨论】:
现在已经改成静态字段了(大概是因为他们讨厌我们):static directory: resolve_app_path('./example/static'), publicPath: '/static'
以上是关于在 webpack 开发服务器中提供静态资源的主要内容,如果未能解决你的问题,请参考以下文章