During hot reload, Webpack gets stuck at 95% emitting CopyPlugin for a few seconds.
I have many files in my public folder, mostly images (about 1GB), which must be displayed on my VueJS app. If I remove them, I no longer have the problem.
Here are my package.json dependencies:
{
...
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.4",
"register-service-worker": "^1.7.1",
"vue": "^2.6.11",
"vue-router": "^3.1.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-plugin-pwa": "~4.3.0",
"@vue/cli-plugin-router": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
And this is my vue.config.js file:
const path = require("path");
function resolveSrc(_path) {
return path.join(__dirname, _path);
}
// vue.config.js
module.exports = {
lintOnSave: true,
configureWebpack: {
// Set up all the aliases we use in our app.
resolve: {
alias: {
assets: resolveSrc("src/assets"),
},
},
output: {
chunkFilename: "[id].[hash].js",
crossOriginLoading: "anonymous",
filename: "[name].[hash].js",
path: path.resolve(__dirname, "dist"),
}
},
css: {
// Enable CSS source maps.
sourceMap: process.env.NODE_ENV !== "production",
},
};
I would have expected Webpack to cache my public files, and not copy them again at each reload. Maybe there's a way to configure it, but I don't have a good knowledge of Webpack and vue-cli. If anyone has a solution to cache/speed up the hot reload of my app, it would be great, many thanks!