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

我从项目的根文件夹运行 webpack-dev-server。 我有 /src/资产中的 资产文件夹，它是由 CopyWebPackPlugin 复制的:

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

如果我把 Logo.png放在资产文件夹中，那么在运行 webpack-dev-server 之后，我不能访问 译自: 美国《 http://localhost/assets/logo.png 》杂志网站(http://localhost/asset/logo.png)文件，但是可以访问 译自: 美国《 http://localhost/src/assets/logo.png 》杂志网站(http://localhost/src/asset/logo.png)文件。然而，如果我在生产模式下运行，情况就会完全颠倒过来。

如何配置 webpack 服务器，使 译自: 美国《 http://localhost/assets/logo.png 》杂志网站(http://localhost/asset/logo.png)文件在开发模式访问？

103188 次浏览
小开
最佳答案

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

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/'
}
小开

I would add that it was the opposite for me. I originally had my images and .obj/.mtl files in a public folder that existed at the root of my application. I moved them into an assets folder that was created in the app folder.

Performing an npm install --save-dev copy-webpack-plugin and adding the 

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

to the webpack.common.js file fixed my problem.

小开

i use proxy:

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

You can do:

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;
}
}
}

My case was to serve files from outside the project root path, and then CopyWebpackPlugin felt like the wrong approach.

If you are using webpack-dev-server >=4,<4.7 it's onBeforeSetupMiddleware or using v3 it's devServer.before.

小开

Update (webpack-dev-server 4)

Since the latest version. You have to replace contentBasePublicPath and contentBase (see original solution below) with static.directory and static.publicPath. The feature still works.

webpack.config.js

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

Tested with webpack 5.58.2, webpack-cli 4.9.0, webpack-dev-server 4.3.1.

Keep reading the Original solution for further information.

Original (webpack-dev-server 3)

For everyone who wants real static files without copying them and landed here. The Webpack output configuration publicPath does not work.

You need the DevServer property contentBase and optional contentBasePublicPath.

The documentation really lacks on these properties. So let me explain:

Use case: You want to use static files like videos, sounds and images without copying them. In this example create a folder assets in your project root directory. The rest configuration is default (src, dist).

webpack.config.js

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

Without contentBasePublicPath the assets are accessible with root URL. Since contentBase only defines the folder content.

Example: Place an image file "test.png" into your assets folder.

Without contentBasePublicPath you can access it with e.g. <img src="test.png">. With contentBasePublicPath you can use <img src="assets/test.png">.

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

You can use any path you want. E.g. move the assets to your src folder. Just place all assets here. It will not be processed / touched by the build. And the app is still loading from the default root (dist) path. This is what we want. The simplest and best solution in my opinion.

Tested with a TypeScript project and Webpack 5 (webpack-cli 4, webpack-dev-server 3). 👍


提交答案