For development purposes i don't use npm run serve because i'm integrating Vue with my backend project. Instead, i wrote my own command in package.json:
"dev": "vue-cli-service build --mode development --watch"
And it all works great, but it generates tons of webpack's hot-update.js files in my build dist directory and the problem is that they don't get deleted.
Is there a way to configure vue-cli/webpack in such way that these files are automatically deleted or not even created in the first place?
I believe the development mode will automatically enable hot reloading when the watch flag is enabled. Even though without the watch flag the development mode flag on build will not include hot reloading. Confusing. I had to add this to my vue.config.js file:
module.exports = {
chainWebpack(config) {
config.plugins.delete("hmr")
},
};
Note: that will ruin
npm run serve
Related
I am investigating the features of Lerna to try and speed up our bootstrap process which currently takes quite a long time.
When referring to bootstrap here I am referring to the process of running npm install with hoisting and linking local packages together
One of the things I am trying to do is only build the packages that I have changed in a branch. Take this example project
Package CLI
Package Header
Package Footer
Package WebApp : Depends on Header & Footer
With this scenario what I want to do in CI is:
If I only change the CLI project then only the CLI project should go through bootstrap -> build -> test
Only changing Header should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing Footer should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing WebApp should do the process for Header, Footer and WebApp because we need to use the dependencies to check WebApp
The first thing I have looked at is using the jobs affected by a PR. This works for executing a script defined in the package.json, but only for the package itself and not its dependencies. In my example if I change CLI then the job only runs in the CLI package as I want, but if I change WebApp then it only runs in WebApp and it doesn't run on the dependencies Header and Footer. This is only for running an npm script rather than bootstrap anyway so I am not even sure this is the correct thing to be looking into.
Secondly I was looking into using task pipelines. So for example in the package.json of the WebApp I have
"dependencies": {
"header": "*",
"footer": "*"
}
And then in the Lerna.json I have
{
"version": "3.0.0",
...
"targetDefaults": {
"build": {
"dependsOn": [
"^build"
]
},
"test": {
"dependsOn": [
"^build"
]
}
},
"useNx": true
}
As far as I can tell though when I run test on WebApp using $ npx lerna run test --scope=webapp I can't see any output relating to it doing anything with it's dependencies. Additionally, I still think this doesn't account for the bootstrap process needed before the build step.
I'm using the Vue CLI to compile my single page application. I am using Vue Router, Vuex, Axios and Vuetify as imported libraries. I have been using npm run serve during development and that has been fine, however I now want to compile for production.
I have used the command npm run build and the build starts fine with no errors shown, but it seems to never end. I stopped it after half an hour because I thought that was far too long. Can someone point me in the right direction? I assumed it would only take a couple of minutes if that. I'm sure there is some configuration I am missing.
UPDATE
My vue.config.js file contents:
const path = require('path');
module.exports = {
devServer: {
writeToDisk: true,
},
}
When I run npm run build, according to package.json this will run vue-cli-service build
I have a project with an existing webpack setup and it's unrelated to Vue.
Until now I have multiple entry points setups and some of these entry points are opening some iframes popups, and the plan is to build these iframes with VUE.
This means that I will also have multiple VUE entry points, this shouldn't be a problem but what I can't figure out is:
what is the best way to add VUE-cli into this already existing setup and use the same node_modules folder
Also to be able to add the vue-cli build commands to be run/triggered after my existing webpack build commands.
Let me know if more details are needed?
I've figure it out and it turn out that you can have both in the same project.
I've used vue create on my existing project folder and there is a prompt with a merge options.
Unfortunately it deleted my dependencies but was not such a big deal. Just had to reinstall them.
Now my project's webpack configuration remained completely separate form vue-cli which is handled by the vue.config.js and this is exactly what I wanted.
I am using something like this to build everything at once:
"build": "webpack --config webpack.prod.js && vue-cli-service build"
I'm new in vue, and a documentation says that every time I create a component I have to run npm run dev and npm run watch.
But don't know what their purpose is?
Can someone help me?
npm run dev combines all your Vue components and other JavaScript files into a browser-friendly combined file.
npm run watch does the same, but then it stays active and "watches" for updates to your .vue and .js files. If it detects a change, it'll re-build the browser-friendly file so you can just refresh the page.
Technically those will just run whatever scripts are defined in your package.json with the name dev and watch. Without seeing your package.json it's impossible to know exactly what they do.
For most project configurations those commands will compile your Vue components into raw javascript. The difference between dev and watch is the dev command will compile the code then exit while the watch command will compile the components then watch the files and recompile when one of them changes.
I'm building a Wordpress theme and have recently switched from using Prepros to Webpack/Babel/PostCSS etc... to do all of the SASS and Javascript compiling manually so that I can add more custom functionality.
The last functionality of Prepros that I need to recreate is the automatic file uploading via FTP when a file is edited. I've been searching around for a while now and can't really find any Webpack plugins that will automatically upload files to a server via FTP whilst also giving me lots of options (i.e. specifying file extensions to upload/ignore).
What's the best way to automatically upload files to a server via FTP once they have been changed (saved) using Webpack?
At the moment it looks like my best option is webpack-ftp-upload-plugin, but it doesn't look like there are many customisation options as I mentioned above...
Use this script after completing build ftp-deploy. Right after the compilation, the bulldog will be deploy. You do not need to have a plugin in the webpack
"scripts": {
"build": "concurrently \"yarn prod"\ \"yarn deploy\"",
"prod": "webpack --config webpack.config.js --mode production",
"deploy": "node deploy"
}