Im importing the vue app if a specific class name exists. So basically its dynamically importing. Below is the code for webpackChunk. In home.js file I check if element exists and dynamically load it.
if (elementExists) { import(/* webpackChunkName: "vue" */ '../vue/main.js') }
In the production build, I get vue.js and vendor~vue.js which is refered in the home.js file for dynamically loading it in production build. But the path for these 2 files gives me 404 error. So basically the path seems to be an issue. In webpack config I have specified the chunkFileName as
chunkFilename: 'scripts/[name].js',
Can someone suggest how to solve the path issue in prod
Related
I'm using the vue-cli tool to develop vuejs apps, and I'm developing a server too, so i want to build the /dist folder in my server to send it to the browser as static, but I don't even know where the /dist folder is.
There is a webpack.prod.config.js file (I think is the webpack config for production) and in the path-output field I tried to wirte the path but didn't work.
/dist is just a default setting by VueJS. If you want to modify this : as the documentation from VueJS states :
Always use outputDir instead of modifying webpack output.path.
Create a vue.config.js as an optional config file that will be automatically loaded by #vue/cli-service if it's present in your project root (next to package.json).
The file should export an object containing options:
// vue.config.js
module.exports = {
// options...
}
As otheres already stated in the comments, use outputDir to specify the directory where the production build files will be generated in when running vue-cli-service build. Note the target directory will be removed before building (this behavior can be disabled by passing --no-clean when building).
// vue.config.js
module.exports = {
outputDir : ''
}
I have typescript module and a sass file for a component which exist in one directory. The typescript file will be transpiled at some path in the build directory and sass file will also be compiled to css file at same path in the build directory. Now I want to import css string from the compiled file which exist in the build directory. But while importing it in typescript its giving error that file doesn't exist. Now that is true that css file from which I'm trying to import doesn't exist yet, but it will be present relative to the compiled javascript file in the build directory. How to resolve this issue?
In typescript file I'm importing like this
import navbarStyles from './navbar.css';
The directory structure is
- /navbar
| - navbar.ts
| - navbar.scss
Expected result: I should be able to import string from css file as expected.
You can use wildcard module declaration. Putting something like the following in a css-modules.d.ts file (name doesn't matter) anywhere (usually in root) would work.
declare module "*.css" {
const path: string;
export default path;
// anything else that the bundler exports
}
If you are also bundling scss using webpack or something like that, import "./navbar.scss" would also work.
I have created an application (using vue and webpack) that needs two urls to access REST services. These urls are different per deployment. So I would realy like to have an external configuration file (maybe JSON) that stores those urls.
I did some research and I came upon webpack externals. Added externals to my configuration file:
module.exports = {
...
externals: {
tryout: path.resolve(__dirname, "./test.js")
}
}
test.js is really simple --> export default {url1 : 'https://bla', url2: 'https://bla2'}
From the vue file where I need this file I call:
import Tryout from 'tryout'
console.log(Tryout)
This causes my application to show a blank screen. No errors in the console nor in the npm console screen.
Not sure what is happening. couple of questions:
I am using dev server not sure where to place the test.js file I placed it here : __dirname, "./test.js" so this is in my build directory...
Should I load it in my index.html file like an external libary load?
does anybody has a step by step example? Couldn`t find it online..
This should be simple but no clue since I am not getting any error or message...
Any help would be really helpful!
I'm trying to import js library to use it in a Vue component.
From CDNs all js imports are working. But i can't use CDN for production.
if i use the way to import it globally i can see that my js file is replaced with html content... i guess it is because of a bad webpack config.
I also used the require('') way directly in my component but no success.
the only JS that is imported is app.js, but i can't find any config file that is calling this js or any webpack config that tells to merge js files in it...
i have a vue.config.js file like this i can't find any other config file for webpack in my project
module.exports = {
// proxy API requests to Valet during development
devServer: {
//proxy: 'http://api.mtm'
},
indexPath: 'public/index.html',
}
to import js file i've tried like this directly in my Vue component just after the export default {..
require('../../public/timer.js');
the error i have looks like that : TypeError: t is undefined
I am working with a react js project. i am using webpack and redux with that. Here is the folder structure of my project.
-assets
-src
-component
-index.jsx
-container
-index.jsx
For now i want to use dynamic className for the index.jsx files according to their working directory name. Example:
for index.jsx in the folder component, the className will be
src-component
for index.jsx in the folder container, the className will be
src-component
I have tried to use npm module path for that. But the __dirname gives the output of the url of the browser '/'. How can i get that pwd from the jsx file.
By default, webpack mocks Node's __dirname to "/". You can enable the real dirname by adding the following to your webpack configuration:
node: {
__dirname: true
},
After that, __dirname will be set, relative to the resolve context in your webpack configuration.