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"
},`
В чем может быть проблема? Спасибо.