webpack-dev-server 代理 vs 静态资产

如何解决webpack-dev-server 代理 vs 静态资产

我有 webpack5 在 assets/ 中创建文件，我还想在其中存储几个静态文件，然后我希望 webpack-dev-server 将每个未由 webpack 或静态管理的请求代理到后端服务器。>

在生产中，所有资产都捆绑在 Go 服务器中，但在前端开发期间，我想将两者结合起来。

不幸的是，我无法让它为静态内容提供服务:-/你们能不能赐教一下？

// webpack/webpack.config.dev.js
const Path = require('path');
const Webpack = require('webpack');

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

// extend webpack.common.js
module.exports = merge(common,{
  mode: 'development',devtool: 'cheap-source-map',// webpack serve
  devServer: {
    inline: true,index: '',contentBase: Path.join(__dirname,'../assets'),host: process.env.HOST || '127.0.0.1',port: process.env.PORT,// backend
    proxy: {
      context: () => true,target: {
        host: '127.0.0.1',port: process.env.BACKEND
      }
    }
  }
});

// webpack/webpack.common.js 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const Path = require('path');
const Webpack = require('webpack');

module.exports = {
  entry: {
    'js/index': Path.resolve(__dirname,'../src/js/index.js'),'css/index': Path.resolve(__dirname,'../src/scss/index.scss'),},output: {
    path: Path.join(__dirname,filename: '[name].js',publicPath: '/',plugins: [
    new RemoveEmptyScriptsPlugin(),new MiniCssExtractPlugin({
      filename: '[name].css',}),],resolve: {
    alias: {
      '~': Path.resolve(__dirname,'../src')
    },module: {
    rules: [
      {
        test: /\.s?css$/,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader'],}

整个项目可以在https://github.com/amery/go-webpack-starter.git

找到