In a vue cli 3 project I want to display a version number in the webpage. The version number lies in the package.json file. The only reference to this that I found is this link in the vue forum. However, I can’t get the proposed solution to work. Things I tried Use webpack.definePlugin as in the linked resource: vue.config.js Then
Tag: webpack
Babel not compiling vendors chuck
I migrated to Webpack 4 and set up everything according to the Docs, however, my vendors.js chunk is not getting compiled like the main.js chunk. I have placed the vendors into the optimization.splitChunks.cacheGroups object, as the docs suggested, but didnt find a way to make these “cacheGroups” get compiled with babel. My problem is that one of the libraries has
Storybook with absolute paths
In our app we use absolute paths for importing. As an example if we have a path which is relative to the src folder, we can just write import module from “components/myComponent”. The issue is that this is not working in storybook. After some digging it turns out you can take the default webpack config and extend it as needed
React –> Warning: validateDOMNesting(…): cannot appear as a descendant of
I’m getting this warning in browser console: on line: It’s a react project. Also I’m using webpack. How to solve this problem? Answer The warning tells you what exactly you need to do. You cannot nest <p> tags and hence use div for the outer tag like
How to minify a source file (Javascript) into a minify file using uglifyjs-webpack
I want to minify my files using uglifyjs-webpack. For example I have a source file core/js/test and want to minify it and send it to min/js/test. Just using a source and respective output, how do I use it with webpack. Answer I often just use the optimization: {minimize: true} option (see this) since webpack 4. However, webpack still allows you
Babel not transpiling arrow functions (Webpack)
When running webpack, and babel, the resulting bundle.js still contains arrow functions. This gives me a Syntax Error when running in Internet Explorer 10. I would like babel to replace the arrow functions with normal functions that IE can run. My package.json has the following devDependencies: My webpack.config.js looks like this: My .babelrc looks like this: To transpile, I run
How to render .vue file in javascript when using ES5? (Trying to use webpack and vue-loader)
I have been trying to migrate a vue project and I unfortunately cannot use import/export in where I am building the application. Therefore, to simplify my problem, I created a project from scratch to build a vue component without the vue-cli. I have been successful to bring up the vue app with webpack before I created .vue files but after
How to remove folder with npm before build
I’ve got a scripts “build”: “rimraf dist webpack –progress –config webpack/prod.js”, But actually,it removed not dist but all file inside webpack folder. But I need delete only dist Answer Npm scripts are basically the same as running the commands directly in bash. In your case, you are running rimraf dist webpack which means webpack is an argument for rimraf. To
Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap
I followed the instructions at getbootstrap.com thinking that everything would just work. It isn’t so far : Everything seems to be fine until I try to load the page, at which point my Express.js app throws the error I have tried npm install, restarting my server, looking on Google, StackOverflow (yes, I know there are quite a few similar questions,
How to import ipcRenderer in react?
I’ve tried to import ipcRenderer in react app but I get this error message : require is not defined Answer You need to use Otherwise it will try to import it from Webpack or whatever module bundler you use. You can checkout this thread for a better explanation: https://github.com/electron/electron/issues/7300