Cannot use [chunkhash] or [contenthash] for chunk in ‘[name].[chunkhash].js’ (use [hash] instead)
Commented out new webpack.HotModuleReplacementPlugin() in the plugins helped fix this
webpack
Deploy VueJS App in a subdirectory
For Vue CLI 3 it is pretty simple. Edit your vue.config.js (if there is none, create it in project root directory) and add following lines: module.exports = { baseUrl: “./” }; Or whatever sub-directory you want. You may also decide according to NODE_ENV. See the docs. module.exports = { baseUrl: process.env.NODE_ENV === ‘production’ ? ‘/production-sub-path/’ … Read more
What is the chunk-vendors.js file and how is it created? (Webpack)
The chunk-vendors.js, as its name says, is a bundle for all the modules that are not your own, but from other parties. They are called third-party modules, or vendor modules. Oftentimes, it means (only and) all the modules coming from the /node_modules directory of your project. In webpack 3, you had to do it on … Read more
Source Maps not working with Webpack
In bundle.js you will see original transpiled webpack bundle – this is normal behaviour. Open webpack:// and you will see your project files.
How can i pass webpack environment variables in html?
You can use html-webpack-plugin. You will have to use .ejs or some other template language and then use like that new HtmlWebpackPlugin({ template: ‘./src/public/index.ejs’, inject: ‘body’, environment: process.env.NODE_ENV }), in index.ejs <body class=”<%= htmlWebpackPlugin.options.environment %>”>
vue webpack template missing parser
Prettier has caused this regression in their 1.13.0 update which occurred today. Downgrade to the previous version to fix this error: npm install –save-dev prettier@1.12.0 npm run dev That should do the trick.
How to generate dynamic import chunk name in Webpack
From webpack docs: webpackChunkName: A name for the new chunk. Since webpack 2.6.0, the placeholders [index] and [request] are supported within the given string to an incremented number or the actual resolved filename respectively. You can use [request] placeholder to set dynamic chunk name. A basic example would be: const cat = “Cat”; import( /* … Read more
How can I using select2 with webpack?
You can run select2 in this way: import $ from ‘jquery’; import ‘select2’; // globally assign select2 fn to $ element import ‘select2/dist/css/select2.css’; // optional if you have css loader $(() => { $(‘.select2-enable’).select2(); });
` __webpack_require__(…) is not a function` when using babel 6
I’d like to add another reason why this error might pop up: I did the following: import mapActions from ‘vuex’ instead of: import { mapActions } from ‘vuex’ The former was importing the entire vuex export, which is an object. Adding object destructuring fixed the problem.
How to make Font awesome 5 work with webpack
In my project (HTML Starter with webpack 4.26.1) I added FontAwesome via two variants: 1. Installed and added I just installed FontAwesome Free (v5.5.0) npm install –save-dev @fortawesome/fontawesome-free and I added to index.js import ‘@fortawesome/fontawesome-free/js/fontawesome’ import ‘@fortawesome/fontawesome-free/js/solid’ import ‘@fortawesome/fontawesome-free/js/regular’ import ‘@fortawesome/fontawesome-free/js/brands’ Source code / Commit 2. Used with the API / SVG I installed FontAwesome … Read more