Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.05.2017, 17:46
Интересующийся
Отправить личное сообщение для Giden Посмотреть профиль Найти все сообщения от Giden
 
Регистрация: 22.05.2012
Сообщений: 14

Настройка webpack-dev-server --inline --hot для Angular 2
Всем доброго времени суток. Пишу тестовое приложение а на старте возникла проблема. Суть её в том, что не могу запустить webpack-dev-server с возможностью Hot Replacement. Запускаю приложение и ничего не происходит. Когда вместе в webpack-dev-server запускаю webpack, то всё гуд. Сервак поднимается и работает лишь потому, что у меня в хеде стоит загрузка моих js файлов. Но ведь с webpack-dev-server их прописывать в хеде не нужно. Так ведь? Webpack-dev-server их вообще не создаёт физически. Подскажите, кто знает.
Заранее благодарен.
Пример кода.
webpack.config.js
var webpack = require('webpack');

module.exports = {
    context: __dirname + "/ts",
    entry: {
        'main':'./home.ts',
        'polyfils':'./polyfils.ts'
    },
    output: {
        path: __dirname + "/",
        publicPath: 'http://localhost/',
        filename: "js/[name].js",
        chunkFilename: '[id].chunk.js'
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader?', 'angular2-template-loader', '@angularclass/hmr-loader'],
                exclude: [/node_modules/]
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            }
        ]
    },

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

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

    watch: true,

    devServer: {
        port: 80,
        proxy: [
            {
                context: ['/api'],
                target: 'http://localhost:8080/',
                secure: false,
                pathRewrite: {'^/api': ''}
            },
            {
                context: ['/components'],
                target: 'http://localhost:80/ts',
                secure: false
            }
        ]
    }
}


HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Page Title</title>
    <base href="/">

</head>
<body>
<my-app>
    Loading...
</my-app>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 23.05.2017, 12:07
Интересующийся
Отправить личное сообщение для Giden Посмотреть профиль Найти все сообщения от Giden
 
Регистрация: 22.05.2012
Сообщений: 14

Ну что же. Отвечу сам на свой вопрос. Может кому то в будущем пригодится. Проблема заключалась в том, что нужно было добавить пару плагинов для того, что бы webpack-dev-server подгружал index.html и для порядка загрузки скриптов.
Вот собственно кусочек кода который решает проблему.
new webpack.optimize.CommonsChunkPlugin({
            name: ['main', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'index.html'
        })
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[job] JS-разработчик (+Angular) на UI внутреннего проекта (для других разработчиков:) Anna-HR Работа 12 19.01.2015 13:50
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
конференция для JS dev, Минск, 20 апреля 2013 IT Staff Оффтопик 0 12.04.2013 15:29