How do you configure a Webpack dev server to serve a specific folder while running the rest of the site through a different server?

北战南征 提交于 2019-12-04 11:12:22

I've mostly got this working with a .NET app. It still serves the dev files from localhost:8080 but takes care of modifying the template files for you during dev and adjusting them back for production. Not sure if it would solve your problem entirely, that way, but it's working for us, for now and may help others, so I'll leave it here anyway.

In package.json I've got a start (dev) and build (prod) script:

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

webpack.prod.js just sets mode: "production" and merges with webpack.config.js which does most of the webpack stuff, including injecting the files into the .net _Layout_React.cshtml file including the productions scripts from the Scripts folder:

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',
        },
      },
    },
  },
};

When I run npm run build this builds the production _Layout_React.cshtml template which is used in the app and includes files from the filesystem. However, when I run npm start it changes the _Layout_React.cshtml template to include files from localhost:8080 which is where the webpack-dev-server is running and serving watched files from:

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/',
    },
});

Now when I run npm start then run the .NET app, I get .NET app on localhost:33401 but it's getting it's react files from localhost:8080 and auto-compiling them on save and when it's time to push to the repo I run npm run build and it builds the files into hard files in the .NET Scripts folder and updates the template to reflect this.

Change the publicPath: '/dist/' of webpack config to match your actual product path and then change the script SRC in index.html to point to the new public path.. i.e basically virtual path... Not necessarily need to be present on actual file system.. I have achieved the same in my project..

Think the issue is caused by using this host: http://my.server instead of the default http://localhost:8080

Try to start webpack-dev-server with the flag --host 0.0.0.0 and --port 80

`--host <hostname/ip>`: hostname or IP. `0.0.0.0` binds to all hosts.

https://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!