Webpack 开发服务器不显示完整的 url

Question

我通过 webpack-dev-server 启动我的应用程序，但不是完整的 url，例如：http://localhost:8080/welcome webpack 总是向我显示http://localhost:8080/webpack-dev-server。有什么办法可以改吗？

这是我的 webpack 配置：

var loaders = require("./loaders");
var webpack = require('webpack');

module.exports = {
  debug: true,
  entry: ['./app/main.ts',],
  output: {
    filename: './dist/build.js'
  },
  devtool: 'source-map',
  resolve: {
    root: __dirname,
    extensions: ['', '.ts', '.js', '.json']
  },
  resolveLoader: {
    modulesDirectories: ["node_modules"]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      'window.jquery': 'jquery'
    })
  ],
  module: {
    loaders: loaders
  },
  externals: {
    'angular': 'angular',
    'lodash': '_'
  }
};

这些是我的装载机：

module.exports = [
  {
    test: /\.ts(x?)$/,
    loader: 'ts-loader'
  },
  {
    test: /\.html$/,
    loader: 'ngtemplate?relativeTo=/src/!html'
  },
  {
    test: /\.css$/,
    loader: 'style-loader!css-loader'
  },
  {
    test: /\.less$/,
    loader: 'style!css!less'
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
  },
  {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader'
  },
  {
    test: '\.jpg$',
    exclude: /node_modules/,
    loader: 'file'
  },
  {
    test: '\.png$',
    exclude: /node_modules/,
    loader: 'url'
  }
];

Answer 1

默认情况下，转到 localhost:8080/ 以启动您的应用程序。如果您使用的是 i-frame 模式，那么它将到达http://localhost:8080/webpack-dev-server。如果您想通过 localhost:8080 运行您的应用程序，则在输出中将 publicPath 设置为 '/'

output: {
    filename: './dist/build.js',
    publicPath:"/"   
}

在你的 package.json 中

"start":"webpack-dev-server"