I have a scenario where by im trying to make changes to Vue files and yarn run watch/dev has stopped working and tracking any changes made.
Im running a docker environment and any changes made after a successful yarn run dev are not being shown and also any changes made to my vue files are not triggering a rebuild in yarn run watch.
I have even tried yarn run watch-poll and that has also had no success.
Ill attached my webpack file and package.json
{
"private": true,
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"cover": "cross-env NODE_ENV=coverage nyc --reporter=lcov --reporter=text npm run test:cover",
"test": "cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/unit/setup.js --recursive --glob \"*.spec.js\" 'tests/unit'",
"test:cover": "mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/unit/setup.js --recursive --glob \"*.spec.js\" 'tests/unit' -- --compilers js:babel/register ",
"test:single": "cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/unit/setup.js ",
"e2e": "cypress run",
"e2e-open": "cypress open"
},
"devD
Webpack file:
const mix = require('laravel-mix');
require('laravel-mix-purgecss');
let webpack = require('webpack');
const replace = require('replace-in-file');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var isCoverage = process.env.NODE_ENV === 'coverage';
mix.webpackConfig({
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@image': __dirname + '/resources/images/',
'@svg': __dirname + '/resources/images/svgs',
'@theme': __dirname + '/resources/images/svgs/' + process.env.THEME_NAME,
},
},
});
const { GenerateSW } = require('workbox-webpack-plugin');
mix.extend('gmShared', webpackConfig => {
const { rules } = webpackConfig.module;
rules
.filter(rule => rule.exclude && rule.exclude.toString() === '/(node_modules|bower_components)/')
.forEach(rule => (rule.exclude = /node_modules\/(?!(greenmotion-shared)\/).*/));
});
const plugins = [];
// plugins.push(new BundleAnalyzerPlugin);
plugins.push(
new webpack.DefinePlugin({
API_BASE_URL: JSON.stringify(process.env.API_BASE_URL),
AUTH_URL: JSON.stringify(process.env.AUTH_URL),
RDPS_BASE_URL: JSON.stringify(process.env.RDPS_BASE_URL),
HOOYU_REDIRECT_URL: JSON.stringify(process.env.HOOYU_REDIRECT_URL),
BUGSNAG_KEY: JSON.stringify(process.env.BUGSNAG_KEY),
ALGOLIA_APP_ID: JSON.stringify(process.env.ALGOLIA_APP_ID),
ALGOLIA_READ_KEY: JSON.stringify(process.env.ALGOLIA_READ_KEY),
ALGOLIA_PREFIX: JSON.stringify(process.env.ALGOLIA_PREFIX),
ROUTER_MODE: JSON.stringify(process.env.ROUTER_MODE),
STRIPE_PUBLIC_KEY: JSON.stringify(process.env.STRIPE_PUBLIC_KEY),
DEV_MODE: JSON.stringify(process.env.DEV_MODE || false),
IS_DEMO_MODE: JSON.stringify(process.env.IS_DEMO_MODE || false),
ENABLE_DEMO_SHORTCUTS: process.env.ENABLE_DEMO_SHORTCUTS || false,
ANALYTICS_URCHIN: JSON.stringify(process.env.ANALYTICS_URCHIN),
MINIMUM_APP_VERSION: JSON.stringify(process.env.MINIMUM_APP_VERSION),
SOURCE_ID: JSON.stringify(process.env.SOURCE_ID) || 1,
PUSHER_KEY: JSON.stringify(process.env.PUSHER_KEY),
PUSHER_AUTH_URL: JSON.stringify(process.env.PUSHER_AUTH_URL),
SUPPORT_TELEPHONE: JSON.stringify(process.env.SUPPORT_TELEPHONE),
SUPPORT_TELEPHONE_LABEL: JSON.stringify(process.env.SUPPORT_TELEPHONE_LABEL),
SUPPORT_EMAIL: JSON.stringify(process.env.SUPPORT_EMAIL),
})
);
plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
if (!['test', 'coverage'].includes(process.env.NODE_ENV)) {
plugins.push(
new webpack.optimize.CommonsChunkPlugin({
names: ['common'],
filename: 'js/[name].js',
minChunks: function (module, count) {
// Extract the libs in node_modules
return false;
},
})
);
plugins.push(
new webpack.optimize.CommonsChunkPlugin({
names: ['common'],
filename: 'js/[name].js',
minChunks: function (module, count) {
// Extract the libs in node_modules
return (
(module.context && module.context.includes('node_modules')) ||
(module.resource && module.resource.includes('bootstrap.js')) ||
count > 3
);
},
})
);
plugins.push(
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
filename: 'js/[name].js',
chunks: 'infinity',
})
);
}
plugins.push(
new GenerateSW({
swDest: 'sw.js',
// skipWaiting: true,
importsDirectory: 'sw-assets',
runtimeCaching: [
{
urlPattern: '/',
handler: 'networkFirst',
},
{
urlPattern: '/bookings',
handler: 'networkFirst',
},
{
urlPattern: '/profile',
handler: 'networkFirst',
},
{
urlPattern: '/search',
handler: 'networkFirst',
},
{
urlPattern: '/login',
handler: 'networkFirst',
},
{
urlPattern: new RegExp('.*.js'),
handler: 'networkFirst',
},
{
urlPattern: new RegExp('.*.css'),
handler: 'staleWhileRevalidate',
},
{
urlPattern: new RegExp('.*.svg'),
handler: 'staleWhileRevalidate',
},
{
urlPattern: new RegExp('^https://api.staging.greenmotion.com/api/user'),
handler: 'networkFirst',
options: {
cacheName: 'api-cache',
cacheableResponse: {
statuses: [0, 200],
},
},
},
],
})
);
Mix.listen('configReady', function (config) {
const rules = config.module.rules;
const targetRegex = /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/;
for (let rule of rules) {
if (rule.test.toString() == targetRegex.toString()) {
rule.exclude = /\.svg$/;
break;
}
}
});
let webpackRules = [
{
test: /\.svg$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
},
],
},
];;
if (isCoverage) {
webpackRules = webpackRules.concat(
{
test: /\.(js|ts)/,
include: path.resolve('resources/js'), // instrument only testing sources with Istanbul, after ts-loader runs
loader: 'istanbul-instrumenter-loader',
query: {
esModules: true
},
exclude: [
/node_modules/,
/tests/
],
},
{
test: /\.m?js$/,
include: path.resolve('resources/js'),
exclude: [
/node_modules/,
/tests/
],
use: {
loader: 'babel-loader',
options: {
presets: [
['es2015', { targets: "defaults" }]
],
plugins: [
"syntax-dynamic-import",
"transform-class-properties",
"transform-object-rest-spread"
],
}
}
}
);
}
mix.webpackConfig({
devtool: 'source-map',
output: {
publicPath: '',
},
plugins: plugins,
module: {
rules: webpackRules,
},
});
mix.setPublicPath('public')
.gmShared()
.copy('resources/webroot/', 'public/')
.copy('resources/images/', 'public/images/')
.copy('resources/font/', 'public/font/')
.js('resources/js/app.js', 'public/js/')
.sass('resources/sass/app.scss', 'public/css/');
if (!['test', 'coverage'].includes(process.env.NODE_ENV)) {
mix.version()
.copy('resources/html/index.html', 'public/')
.then(stats => {
let manifest = require('./public/mix-manifest.json');
let from = [];
let to = [];
Object.keys(manifest).forEach(key => {
from.push(key);
to.push(manifest[key]);
});
let changes = replace.sync({
files: 'public/index.html',
from: from,
to: to,
});
let missedFiles = replace.sync({
files: 'public/index.html',
from: /{{mix\('(.*)'\)}}/gim,
to: '$1',
});
})
.browserSync({
server: './public',
proxy: null,
notify: false,
open: false,
})
.sourceMaps();
} else {
mix.copy('resources/html/index.html', 'public/')
.then(stats => {
let manifest = require('./public/mix-manifest.json');
let from = [];
let to = [];
Object.keys(manifest).forEach(key => {
from.push(key);
to.push(manifest[key]);
});
let changes = replace.sync({
files: 'public/index.html',
from: from,
to: to,
});
let missedFiles = replace.sync({
files: 'public/index.html',
from: /{{mix\('(.*)'\)}}/gim,
to: '$1',
});
})
.browserSync({
server: './public',
proxy: null,
notify: false,
open: false,
})
.sourceMaps();
}