Настройка webpack для angular2 для создания пакетов в файлах, вместо их хранения в памяти

Question

Я использую Angular2 с Webpack, который настроен в соответствии с Angular2 webpack introduction.

При запуске сервера webpacks dev он связывает мои файлы типов и загружает их в браузере из памяти.

Дело в том, что мне нужно загрузить приложение из IIS, потому что он должен иметь проверку подлинности Windows, поэтому я решил, что единственным способом разработки будет перенастройка webpack для создания связанных файлов при изменении вместо запуска команды сборки после каждого изменения.

Как бы я это сделал?

Мои конфигурационные файлы идентичны файлам из учебника here.

Кроме того, если бы у меня все еще была возможность использования пера, это было бы здорово.

Я буду публиковать файлы webpack.config в любом случае.

webpack.config.js

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

webpack.common.js

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

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

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

    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['ts', 'angular2-template-loader'] 
     }, 
     { 
     test: /\.html$/, 
     loader: 'html' 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
     loader: 'file?name=assets/[name].[hash].[ext]' 
     }, 
     { 
     test: /\.css$/, 
     exclude: helpers.root('src', 'app'), 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
     }, 
     { 
     test: /\.css$/, 
     include: helpers.root('src', 'app'), 
     loader: 'raw' 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['app', 'vendor', 'polyfills'] 
    }), 

    new HtmlWebpackPlugin({ 
     template: 'src/index.html' 
    }) 
    ] 
}; 

webpack.dev.js

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

module.exports = webpackMerge(commonConfig, { 
    devtool: 'cheap-module-eval-source-map', 

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

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

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

webpack.prod.js

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

const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; 

module.exports = webpackMerge(commonConfig, { 
    devtool: 'source-map', 

    output: { 
    path: helpers.root('dist'), 
    publicPath: '/', 
    filename: '[name].[hash].js', 
    chunkFilename: '[id].[hash].chunk.js' 
    }, 

    htmlLoader: { 
    minimize: false // workaround for ng2 
    }, 

    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 
     mangle: { 
     keep_fnames: true 
     } 
    }), 
    new ExtractTextPlugin('[name].[hash].css'), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'ENV': JSON.stringify(ENV) 
     } 
    }) 
    ] 
}); 

package.json

{ 
    "name": "proj", 
    "version": "1.0.0", 
    "description": "", 
    "scripts": { 
    "start": "webpack-dev-server --inline --progress --port 8080", 
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail", 
    "postinstall": "typings install" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.0.0", 
    "@angular/compiler": "2.0.0", 
    "@angular/core": "2.0.0", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 
    "@angular/router": "3.0.0", 
    "core-js": "^2.4.1", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "^0.6.23", 
    "bootstrap": "^3.3.6", 
    "ng2-pagination": "^0.3.5" 
    }, 
    "devDependencies": { 
    "angular2-template-loader": "^0.4.0", 
    "css-loader": "^0.23.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.8.5", 
    "html-loader": "^0.4.3", 
    "html-webpack-plugin": "^2.15.0", 
    "null-loader": "^0.1.1", 
    "phantomjs-prebuilt": "^2.1.7", 
    "raw-loader": "^0.5.1", 
    "rimraf": "^2.5.2", 
    "style-loader": "^0.13.1", 
    "ts-loader": "^0.8.1", 
    "typescript": "^2.0.2", 
    "typings": "^1.3.2", 
    "webpack": "^1.13.0", 
    "webpack-dev-server": "^1.14.1", 
    "webpack-merge": "^0.14.0" 
    } 
} 

Answer 1

Так я узнал, что это на самом деле довольно просто. Вместо запуска сервера с запуском npm просто запустите webpack или webpack -watch и добавьте мой желаемый выходной каталог в раздел вывода webpack.dev.js.

Может даже удалить хешированное имя, удалив поле hash из шаблонов именования везде, поэтому не нужно обновлять index.html вообще.