首页 文章

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

提问于
浏览
41

我从项目的根文件夹运行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文件在开发模式下可访问?

2 回答

  • 32

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

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

    webpack.config.js

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

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

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

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

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

相关问题