使用带有生成文件夹的网页包发布Angular2应用程序_Angular

使用带有生成文件夹的网页包发布Angular2应用程序

angular

使用带有生成文件夹的网页包发布Angular2应用程序,angular,Angular,我是个新手。我已经建立了一个小项目，在这个项目中，我使用npm启动它构建js并运行我的应用程序，并在fly中提供所有js。是否有任何方法，我可以生成一个包含所有符合js和html文件的构建文件夹，这样我就可以直接在IIS上托管它 webpack.config.js module.exports = require('./config/webpack.dev.js'); config/webpack.common.js var webpack = require('webpack'); var

我是个新手。我已经建立了一个小项目，在这个项目中，我使用npm启动它构建js并运行我的应用程序，并在fly中提供所有js。是否有任何方法，我可以生成一个包含所有符合js和html文件的构建文件夹，这样我就可以直接在IIS上托管它

webpack.config.js

module.exports = require('./config/webpack.dev.js');

config/webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const path = require('path');
const rootDir = path.resolve(__dirname, '..');

module.exports = {
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
},

resolve: {
    extensions: ['.js', '.ts']
},

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader', 'angular2-template-loader']
        },
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file?name=assets/[name].[hash].[ext]'
        },
        {
           test: /\.css$/,
           loaders: ['to-string-loader', 'css-loader']
        }
    ]},

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

config/webpack.dev.js

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');

const path = require('path');
const rootDir = path.resolve(__dirname, '..');

module.exports = webpackMerge(commonConfig, {

devtool: 'cheap-module-eval-source-map',

output: {
    path: path.resolve(rootDir, 'dist'),
    publicPath: 'http://localhost:8080/',
    filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    plugins: [
        new ExtractTextPlugin('[name].css')
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Angular With Webpack</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

如果需要任何其他信息，请告诉我。

使用Webpack.prod.js文件获取构建文件夹请提供您的package.jsonVignesh。我尝试运行该程序，但未成功。如果您有webpack.prod.js的特定代码，请提供以下版本（假设您安装了angular cli），谢谢您的建议，但我不使用angular cli，因为我们在这方面无法控制webpack配置。所以使用链接来创建应用程序。我们有什么解决办法吗

{
  "name": "angularwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "postinstall": "typings install",
    "build": "webpack --config config/webpack.dev.js --progress --profile --bail"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^4.1.2",
    "@angular/compiler": "^4.1.2",
    "@angular/core": "^4.1.2",
    "@angular/forms": "^4.1.2",
    "@angular/http": "^4.1.2",
    "@angular/platform-browser": "^4.1.2",
    "@angular/platform-browser-dynamic": "^4.1.2",
    "@angular/router": "^4.1.2",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.0",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.3",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.17.0",
    "to-string-loader": "^1.1.5",
    "typescript": "^2.3.2",
    "typings": "^2.1.1",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5",
    "webpack-merge": "^4.1.0"
  }
}