We currently use a combination of Grunt, vueify, and browserify for our build process. This setup builds our Single File Components and separates Vue into its own external file.
Due to various factors like vueify being unsupported and the need for async component loading, we are considering switching to Webpack.
However, I am struggling to wrap my head around adapting our current method for Webpack. I have shared our existing build process below and would appreciate any insights on how to make it work with Webpack. How can we configure Webpack to compile our *.vue.js files into pre-rendered JavaScript files? I'm finding it difficult to even get started... Any suggestions?
vueRuntime: {
expand: true,
cwd: 'node_modules/vue/dist/',
src: 'vue.runtime.min.js',
dest: 'js/rwd/libs',
ext: '.js',
extDot: 'first',
options: {
configure: b => b
.require('vue')
.transform(
{global: true},
envify({NODE_ENV: 'production'})
)
.bundle(),
browserifyOptions: {
debug: false
}
}
},
vue: {
expand: true,
cwd: 'js/rwd/',
src: '**/*.vue.js',
dest: 'js/rwd',
ext: '.js',
extDot: 'first',
options: {
configure: b => b
.transform('vueify')
.transform(
{
global: true
},
envify({NODE_ENV: 'production'})
)
.external('vue')
.bundle(),
browserifyOptions: {
debug: false
}
}
}
Below is an example of a *.vue.js file:
const Vue = require('vue');
const App = require('./something/components/Something.vue');
new Vue(App).$mount('#app-element-id');