webpack，devServer内存中不生成资源文件导致资源访问不到

Question

webpack，devServer内存中不生成资源文件导致资源访问不到

publicPath配置成根路径了，但是devServer在内存中不生成剥离出来的资源文件，导致图片和字体资源访问不到

通过本地打包生成的文件，会单独把图片和字体资源剥离到assets目录

同样的打包脚本，只是跑在devServer上，由于devServer内存中不生成assets目录导致了资源访问不到，下图中devServer的内存情况：

Answer 1

参考了 https://github.com/vuejs-temp... 的devServer配置,最终采用CopyWebpackPlugin进行处理，可以解决我描述的问题

Answer 2

我遇到了类似问题，原来的此处的配置是
name: '/img/[name].[ext]'，修改为name: 'img/[name].[ext]'就可以了。希望帮到你

Answer 3

这个要看下你的 webpack-dev-server 是怎样配置了，参照了 vue-cli2 中的 webpack 模板配置，一般的

    // since we use CopyWebpackPlugin.
    // 这个来决定引用的静态资源文件路径配置
    contentBase: false,
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay ? {
      warnings: false,
      errors: true,
    } : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll
    }

Answer 4

配置贴一贴才是真的。

Answer 5

let path = require('path');
module.exports = {
  optimization:{
    splitChunks:{
      cacheGroups:{
        common:{
          chunks:'all',
          minChunks:2,
          minSize:0,
        },
      }
    }
  },
  devServer:{
    port:3000,
    progress:true,
    contentBase:'./dist',
    compress:true,
  },
  mode:'development',
  entry:{
    app:'./src/index.js',
    vendors:'./src/vendors.js',
  },
  output:{
    filename:'[name].js',
    path:path.resolve(__dirname,'dist'),
  },
  module:{
    rules:[{
      test:/\.(png|jpg|gif)$/,
      use:[ {loader:'file-loader',
            options:{
              name:'img/[name].[ext]'
            }}],
      
    }]
  }
}

并没有这个问题