I try to create some Vue libraries for internal use in our company.
As all of our projects use Vuetify, and our libraries expose some components that use it too, i don't want to bundle Vuetify in the libraries, but use the one installed with the "final" project.
I've look in the Webpack and Vue-cli documentation, and found the externals configuration key in webpack. But this vue.config.js file :
module.exports = {
configureWebpack: {
externals: {
vuetify: "commonjs2 vuetify",
},
},
chainWebpack: config => {
// These are some necessary steps changing the default webpack config of the Vue CLI
// that need to be changed in order for Typescript based components to generate their
// declaration (.d.ts) files.
//
// Discussed here https://github.com/vuejs/vue-cli/issues/1081
if (process.env.NODE_ENV === "production") {
config.module.rule("ts").uses.delete("cache-loader");
config.module
.rule("ts")
.use("ts-loader")
.loader("ts-loader")
.tap(opts => {
opts.onlyCompileBundledFiles = true;
opts.transpileOnly = false;
opts.happyPackMode = false;
return opts;
});
}
},
parallel: false,
};
Does'nt seems to works, as Vuetify is still in the bundle (And so, the weight of the output is BIG).
Since I don't want to load Vuetify multiple times... How can i achieve this ?
Related
My Vue CLI project relies on JSON data from the backend. Because of CORS issues I copied that file into the project's public folder which works during development. But for the deployment builds I'd like to get rid of that file.
How can I exclude that file from the build process? I suppose the chainWebpack method in vue.config.js is the key but I can't find how to tweak the different outputs for serve and build.
I got this to work:
module.exports = {
chainWebpack: config => {
if (process.env.NODE_ENV === "production") {
config.plugin("copy").tap(opts => {
opts[0][0].ignore.push({ glob: "someFile.json" });
return opts;
});
}
}
};
The process.env.NODE_ENV === "production" makes the exclusion only apply to the build output.
In my Vuepress project I would like to use v-runtime-template.
Their setup instruction says
You must use the with-compiler Vue.js version. This is needed in order to compile on-the-fly Vue.js templates. For that, you can set a webpack alias for vue to the vue/dist/vue.common file.
This could be achieved by adding
module.exports = {
runtimeCompiler: true
};
to vue.config.js, but I do not understand how to configure in Vuepress.
I tried this:
// .vuepress/enhanceApp.js
export default ({ Vue, options, router, siteData }) => {
Vue.config.runtimeCompiler = true
}
but it did not give any results.
How should the configuration be done?
From: https://github.com/vuejs/vuepress/issues/402#issuecomment-388169056
Add the following to your .vuepress/config.js:
chainWebpack(config) {
config.resolve.alias.set('vue', 'vue/dist/vue.common.js')
}
More info: https://vuepress.vuejs.org/config/#chainwebpack
I believed the npm run serve command use the sourcemap by default for the js, but it seems not because I always see vue.runtime.esm.js:619.
I made a vue.config.js file at the root level project.
I try two things:
module.exports = {
configureWebpack: config => {
config.devtool = 'source-map'
}
}
and:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
None of them works. I still stuck with vue.runtime.esm.js:619 which is useless.
Does anyone know how really activate the source-map with vue-cli 4?
Using the generated vue.config.js from vue-cli v4 (generating a vue 3 project) It provided me this file:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
})
I then modified it to this:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
devtool: 'source-map',
}
})
Which works enough for me to enable VSCode debugging in Chrome/Electron.
*Edit
The error you are getting may be unrelated to source-maps and related to warnings from vue itself.
For example
runtime-core.esm-bundler.js:6584
[Vue warn]: Failed to resolve component: AMadeUpComponentName
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <MyView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
Unfortunately this is a limitation of vue. However, improvements have been made between VueJS v2 and v3. Finally, I couldn't find an original source, but I read that improving the warning messages to track down the cause of warnings and errors is a high priority feature.
* Edit 10/12/2022
I had an older project that this answer didn't solve at all. After a yarn upgrade and #vue/cli upgrading, this configuration began working again!
You are looking for the ProjectOptions chainWebpack property.
chainWebpack?: (config: ChainableWebpackConfig) => void;
Try the following in your vue.config.js file:
/** #type import('#vue/cli-service').ProjectOptions */
module.exports = {
// https://github.com/neutrinojs/webpack-chain/tree/v4#getting-started
chainWebpack(config) {
config.devtool('source-map')
},
}
I am using vue-cli3, when i build using npm run build -- --mode=production, it gives 2 css files and 2 js files.
Everytime i make a code change the name of the file also changes like app.de90cdf7.js and chunk-vendors.a9204242.js.
Is there a way in vue-cli to hardcode the files names as app.js and chunk-vendors.js ?
I'm little late to the party. We can chain webpack to apply name changes.
Using version #vue/cli 5.0.4 in year 2022
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack : (config) => {
config.output.filename('[name].js');
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
});
I have a project created through Vue CLI and now I want to use Pug with my Single File Components i.e. the .vue files.
To do that I started following this vue-loader documentation and installed pug and pug-plain-loader with the command npm install -D pug pug-plain-loader. And the next step there proposes inserting the follows in webpack.config.js
// webpack.config.js -> module.rules
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
But, using Vue CLI, I do not have an explicit webpack config file, but vue.config.js.
So, how to add such a pug-plain-loader configuration in vue.config.js (preferably using webpack-chain)?
My current vue.config.js already featuring a svg-loader is as follows:
module.exports = {
// ...
chainWebpack: (config) => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
//TODO: add pug-plain-loader configuration here
}
}
Accordingly with the example here, Vue CLI has it own way to define new rules in webpack. So this code seems to be the right way to define the pug loader (in your vue.config.js file - if doesn't exists, create it):
module.exports = {
chainWebpack: (config) => {
// Pug Loader
config.module
.rule('pug')
.test(/\.pug$/)
.use('pug-plain-loader')
.loader('pug-plain-loader')
.end();
},
};
This worked for me c:
(this apply only in .vue files that have lang="pug" specified in template tag)