webpack-dev-server --打开特定路径？

Posted

技术标签:

【中文标题】webpack-dev-server --打开特定路径？【英文标题】：webpack-dev-server --open to a specific path? 【发布时间】：2018-04-25 20:10:21 【问题描述】：

当使用 --open 标志启动时，我如何激励 webpack-dev-server 打开我的 publicPath？

目前它打开一个浏览器选项卡到 http://localhost:3000，但我希望它直接打开 http://localhost:3000/app，这是我定义的公共路径。

当我在 webpack-dev-server 启动后手动输入 http://localhost:3000/app 时，它按预期工作。

这是我的 webpack.config.js，到目前为止效果很好：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

module.exports = 

  entry: 
    vendor: [
      'jquery',
      'angular'
    ],
    app: './src/app/index.module.js',
    libs: [
      './src/libs/pagination/dirPagination.js',
      './src/libs/sc-date-time/sc-date-time.js',
      './src/libs/msd-elastic.js',
      './src/libs/ng-textcomplete.js',
      './src/libs/highcharts/highslide-full.js',
      './src/libs/highcharts/Sankey.js'
    ]
  ,

  output: 
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/app/'
  ,

  devtool: 'inline-source-map',

  devServer: 
    contentBase: './dist',
    host: 'localhost',
    port: '3000',
    inline: true,
    compress: true,
    proxy: 
      '/api/**': 
        target: 'http://10.189.1.159:8080',
        secure: false,
        changeOrigin: true,
        cookieDomainRewrite: true
      
    
  ,

  resolve: 
    extensions: ['.ts', '.tsx', '.js'],
    alias: 
      angular: path.resolve(__dirname, 'node_modules/angular/index.js')
    
  ,

  module: 

    rules: [
      test: /\.css$/,
      use: ExtractTextPlugin.extract(
        fallback: 'style-loader',
        use: ['css-loader', 'postcss-loader']
      )
    , 
      test: /\.scss$/,
      use: ExtractTextPlugin.extract(
        fallback: 'style-loader',
        use: [
          loader: 'css-loader', options: sourceMap: true,
          loader: 'postcss-loader', options: sourceMap: true,
          loader: 'sass-loader', options: sourceMap: true
        ]
      )
    , 
      test: /\.ts|\.js?$/,
      exclude: /node_modules/,
      loader: 'ts-loader'
    , 
      test: /\.html$/,
      use: [
        loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, 'src/app')),
        loader: 'html-loader'
      ],
      exclude: path.resolve(__dirname, 'src/index.html')
    , 
      test: /\.(jpe?g|gif|png|svg)$/,
      use: [
        loader: 'file-loader?relativeTo=' + (path.resolve(__dirname, 'src/assets'))
      ]
    , 
      test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
      use: [
        loader: 'file-loader',
        options: 
          name: '[name].[ext]',
          outputPath: 'fonts/'
        
      ]
    , 
      test: require.resolve('jquery'),
      use: [
        loader: 'expose-loader',
        options: 'jQuery'
      , 
        loader: 'expose-loader',
        options: '$'
      ]
    , 
      test: require.resolve('angular'),
      use: [
        loader: 'expose-loader',
        options: 'angular'
      ]
    ]

  ,

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin('styles.css'),
    new webpack.optimize.CommonsChunkPlugin(
      name: 'vendor',
      minChunks: Infinity
    ),
    new webpack.optimize.CommonsChunkPlugin(
      name: 'manifest',
      minChunks: Infinity
    ),
    new HtmlWebpackPlugin(
      filename: 'index.html',
      template: './src/index.html',
      chunks: ['manifest', 'vendor', 'app', 'libs']
    new CopyWebpackPlugin([
      context: './src/assets/locales',
      from: '**/*',
      to: './assets/locales/'
    ])
  ]

;

【问题讨论】：

您使用的是 AngularJS，还是新的基于 TS 的 Angular？对于这种事情，您可以使用 Angular 路由器直接将您重定向到所需的位置。 Here 很好地解释了如何做到这一点。 我正在使用 AngularJS（也是用 TS 编写的）。我会看看你的链接。 请记住，AngularJS 中的路由工作方式与 Angular 2 不同。 但是路由器的重定向不只是重定向到另一个“状态”吗？我想重定向到另一个“目录”。 我刚刚注意到您使用--open 标志...该标志用于设置浏览器。根据documentation，您需要类似--openPage 的开关来在加载时导航到另一个页面。如果那是你需要的。至于目录，我不知道除了从 contentBase 和 publicPath 服务之外还有没有其他方法。 【参考方案1】：

使用devServer.openPage。

在您的情况下，该值为/app。

您还可以重写一些配置，这样您就不必传递 cli 命令。

output: 
    publicPath: '/app', // deploy on server with /app/ folder name
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'public')
,

devServer: 
    contentBase: './dist',
    host: 'localhost',
    port: '3000',
    inline: true,
    compress: true,
    proxy: 
      '/api/**': 
        target: 'http://10.189.1.159:8080',
        secure: false,
        changeOrigin: true,
        cookieDomainRewrite: true
      
    
    open: true, // Here
    openPage: '/app' // And here
,

【讨论】：

就是这样！我完全错过了这个选项....感谢您为我阅读文档 ;) 非常感谢@Chris R。你救了我的喜欢。【参考方案2】：

你也可以试试beforeoption：

module.exports = 
  //...
  devServer: 
    before: function(app, server) 
      app.get('/', function(req, res) 
        res.redirect('/app'); // here you can try any of the Express JS res options mentioned in the answer below: 
      );
    
  
;

Documentation for Express.js response

祝你好运……

【讨论】：

看起来是解决这个问题的好方法；）但感谢您的努力。 @scipper，使用这种方法，即使您访问http://localhost:8080/，它也会从redirect 到http://localhost:8080/app，而openPage 只会在/app 启动时转到/app。 我没有说你的方法行不通。这只是解决这个问题的一种过于程序化的方式，一个简洁的配置参数也可以解决它。 同意它有点programmatic，而且before 始终适用于redirecting，而不仅仅是dev-server start，正如您在问题中所问的那样。 ?

以上是关于webpack-dev-server --打开特定路径？的主要内容，如果未能解决你的问题，请参考以下文章

未找到 webpack-dev-server 命令

需要安装'webpack-dev-server'

webpack-dev-server --打开特定路径？

运行webpack-dev-server遇到的问题

webpack5输入指令npx webpack-dev-server 使用webpack-dev-server报错

让 webpack-dev-server 加载的问题