webpack горячая перезагрузка vue компонентов в проекте symfony

Здравствуйте делаю приложение на vue.js, когда я разрабатывал только фронт, hot-reload компонентов vue прекрасно работал. Но как только я перенес фронт в проект симфони, то, при изменении компонента vue, перезагружается вся страница (как при F5). Не пойму где ошибся в конфигурации вебпака.

webpack.config.js:

var path = require('path');
var webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    watch: true,
    entry: {
        build:
            path.join(__dirname, 'public', 'js', 'main.js'),
        app_constructor:
            path.join(__dirname, 'public', 'js', 'app_constructor.js'),
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
    ],
    output: {
        path: path.resolve(__dirname, 'public', 'dist'),
        // publicPath: './public/dist/',
        filename: `[name].js`

    },

    devServer: {
        port: 8013,
        allowedHosts: [
            'localhost:8000',
        ]
    },
    module: {
        rules: [
            {
                test: require('path').resolve(__dirname, 'node_modules/leader-line/'),
                loader: 'skeleton-loader',
                options: {procedure: content => `${content} export default LeaderLine`}
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            },

            {
                test: /\.css$/i,
                use: [
                    'vue-style-loader',
                    process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {sourceMap: true,}
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            config: {
                                path: path.join(__dirname, 'public', 'config', 'postcss.config.js')
                            }
                        }
                    },
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,

                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            config: {
                                path: path.join(__dirname, 'public', 'config', 'postcss.config.js')
                            }
                        }
                    }, {
                        loader: 'sass-loader',
                        options: {sourceMap: true}
                    }, {
                        loader: 'sass-resources-loader',
                        options: {
                            resources: [
                                './public/style/scss/variables/variables.scss',
                            ]
                        },
                    },

                ],
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',

                        // Requires sass-loader@^8.0.0
                        options: {
                            implementation: require('sass'),
                            sassOptions: {
                                fiber: require('fibers'),
                                indentedSyntax: true // optional
                            },
                        },
                    },
                ],
            },
        ]
    },
    resolve: {
        modules: [
            path.join(__dirname, 'public', 'js'),
            path.join(__dirname, 'node_modules')
        ],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            myVariables: path.join(__dirname, 'public', 'style', 'scss', 'variables', 'variables.scss'),
        },
        extensions: ['*', '.js', '.vue', '.json']
    },

    performance: {
        hints: false
    },
    devtool: '#eval-source-map',
    optimization: {
        minimizer: [
            // we specify a custom UglifyJsPlugin here to get source maps in production
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                uglifyOptions: {
                    compress: false,
                    ecma: 6,
                    mangle: true
                },
                sourceMap: true
            })
        ]
    }
};

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map';
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        // new webpack.optimize.UglifyJsPlugin({
        //     sourceMap: true,
        //     compress: {
        //         warnings: false
        //     }
        // }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

На страницу скрипт подключаю следующим образом:

package.json

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --watch",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },`

В чем может быть проблема? Спасибо.


Ответы (0 шт):