如何配置 Webpack 开发服务器来为特定文件夹提供服务，同时通过不同的服务器运行站点的其余部分？

一些简单的背景知识：

我公司的站点运行 CMS，并由 CMS 处理所有路由。没有 html 文件，只有 razor 文件 (.cshtml)。虽然我更愿意从头开始重做网站，但这不是一个选择，因此我尝试通过将 vue.js 与 webpack 开发工作流程逐页集成，慢慢地使网站现代化。基础。

我花了相当多的时间来设置 webpack，使其只能处理 /dist/ 文件夹中的文件 - 其他所有内容都通过http://my.server/ http://my.server/并由 CMS 和后端处理。

通过反复试验，我设法让 webpack-dev-server 在 /dist/ 文件夹中提供文件服务，同时允许服务器的其余部分为其他所有内容提供服务（通过http://my.server/ http://my.server/）。不幸的是，这仅在 webpack-dev-server 部分的文件路径专门引用“http://localhost-8080.com/ http://localhost:8080/“这显然是不可接受的。

开发环境代码必须与生产环境代码完全相同，因此<script src="http://localhost:8080/dist/build.js"></script>简直令人无法接受。

但是，如果我简单地写<script src="/dist/build.js"></script>服务器将其解析为<script src="http://my.server/dist/build.js"></script>这显然是不正确的并导致 404（因为这些文件仅由开发服务器提供）。

我的问题是，“如何配置 webpack-dev-server 以从自身提供 /dist/ 文件夹中的所有内容，同时允许通过”提供网站上的其他所有内容http://my.server http://my.server"?

这是我的 webpack.config.js 文件供参考：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this nessessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    publicPath: '/dist/',
    historyApiFallback: true,
    noInfo: false,
    proxy: [{
      context: function(pathname, req) {
        // exclude /src/ and /dist/
        return !pathname.match("^/(src|dist)/");
      },
      target: {
        "host": "my.server",
        "protocol": 'http:',
        "port": 80
      },
      ignorePath: false,
      changeOrigin: true,
      secure: false
    }]
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

虽然可能没有必要回答这个问题，但如果您需要更多背景知识，我最初的问题（以及该问题的解决方案）位于此处：使用简单的 vue.js/webpack 设置，如何配置开发服务器来代理除一些 .js 和 .vue 文件之外的所有内容？ https://stackoverflow.com/questions/41989185/using-a-simple-vue-js-webpack-setup-how-does-one-configure-the-dev-server-to-pr/41991286#41991286

我主要使用 .NET 应用程序来完成此操作。它仍然提供开发文件localhost:8080但会在开发期间为您修改模板文件并将其调整回生产环境。不确定这样是否能完全解决您的问题，但目前它对我们有用，并且可能对其他人有帮助，所以无论如何我都会把它留在这里。

In package.json我有一个启动（开发）和构建（产品）脚本：

"start": "webpack --config webpack.dev.js && webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"

webpack.prod.js只是设置mode: "production"并与webpack.config.js它完成了大部分 webpack 的工作，包括将文件注入到 .net 中_Layout_React.cshtml文件，包括来自的制作脚本Scripts文件夹：

const HtmlWebPackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader', // creates style nodes from JS strings
          'css-loader', // translates CSS into CommonJS
          'sass-loader', // compiles Sass to CSS, using Node Sass by default
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: '../../../Views/Shared/_Layout_Template.cshtml',
      filename: '../../Views/Shared/_Layout_React.cshtml',
    }),
    new webpack.HashedModuleIdsPlugin(),
  ],
  output: {
    path: path.resolve(__dirname, '../../../Scripts/React/'),
    publicPath: '/Scripts/React/',
    filename: '[name].[contenthash].production.js',
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
      },
    },
  },
};

当我跑步时npm run build这构建了生产_Layout_React.cshtml应用程序中使用的模板，包含文件系统中的文件。然而，当我跑步时npm start它改变了_Layout_React.cshtml包含文件的模板localhost:8080这就是webpack-dev-server正在运行并提供来自以下位置的监视文件：

webpack.dev.js:

const merge = require('webpack-merge');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const baseConfig = require('./webpack.config.js');

module.exports = merge(baseConfig, {
    mode: "development",
    devtool: 'eval-source-map',
    devServer: {
        open: false,
    },
    output: {
        filename: '[name].development.js',
        publicPath: 'http://localhost:8080/dist/',
    },
});

现在当我跑步时npm start然后运行 ​​.NET 应用程序，我得到 .NET 应用程序localhost:33401但它正在从中获取反应文件localhost:8080并在保存时自动编译它们，并在需要推送到我运行的存储库时自动编译它们npm run build并将这些文件构建成 .NET 中的硬文件Scripts文件夹并更新模板以反映这一点。