在webpack dev服务器

Question

我从项目的根文件夹运行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 文件？

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使用不同的路径。

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

<强> webpack.config.js

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

Answer 3

你可以这样做：

const path = require('path');
const path = 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

Answer 4

我使用代理服务器：

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