2017-11-13 20 views
1

どうすれば動くのですかwebpack-dev-server --openフラグで開始すると、私のpublicPathを開くには?webpack-dev-server - 特定のパスを開く?

現在、私の定義された公共の道である、それはhttp://localhost:3000にブラウザのタブを開きますが、私はそれが直接http://localhost:3000/appを開きたいです。私は手動で期待どおりに動作しますが、WebPACKの-devのサーバーのスタートアップ後http://localhost:3000/appを入力

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

}; 
+0

AngularJS、または新しいTSベースの角度を使用していますか?このような場合は、角度ルータを使用して目的の場所に直接リダイレクトすることができます。 [こちら](https://stackoverflow.com/questions/42874859/angular-2routing-redirect-to-with-child-routes)は、これを行う方法の説明です。 – mutantkeyboard

+0

私はAngularJS(TSでも書かれています)を使用しています。私はあなたのリンクを見ていきます。 – scipper

+0

AngularJSではルーティングが角2よりも異なっていることにご注意ください。 – mutantkeyboard

答えて

1

使用devServer.openPage:ここ

は、これまで素晴らしい作品私のwebpack.config.jsです。

あなたの場合、値は/appになります。

設定を少し書き直して、cliコマンドを渡す必要がないようにすることもできます。

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 
    }, 
+0

それはそれです!私は完全にこのオプションを逃した....私のためのドキュメントを読んでくれてありがとう;) – scipper

関連する問題