Наш текущий процесс сборки в настоящее время использует Grunt, vueify и browserify для создания наших компонентов с одним файлом, а также вытаскивает Vue из SFC в свой собственный внешний файл.
По разным причинам (vueify больше не поддерживается, асинхронная загрузка компонентов и т. д.) мы хотим перейти на Webpack.
Однако я не могу понять, как заставить наш текущий метод работать для Webpack. Я включил наш текущий процесс сборки ниже. Я хотел бы выяснить, как заставить Webpack работать на нас. Какие-либо предложения? Кажется, я даже не могу начать... Как заставить Webpack скомпилировать наши файлы *.vue.js в предварительно обработанные файлы javascript? Внизу я также включил содержимое одного из наших файлов SFC .vue.js.
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(
// Required in order to process node_modules files
{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(
// Required in order to process node_modules files
{
global: true
},
envify({NODE_ENV: 'production'})
)
.external('vue')
.bundle(),
browserifyOptions: {
debug: false
}
}
}
Пример файла *.vue.js:
const Vue = require('vue');
const App = require('./something/components/Something.vue');
new Vue(App).$mount('#app-element-id');
@blaz Да, я хорошо разобрался в этом. Кажется, мне достаточно написать вопрос о SO, чтобы начать двигаться вперед.
Я нашел решение, когда у меня будет время, я напишу ответ со ссылками на источники.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Недавно проделав аналогичную миграцию на Vue + Webpack, я нашел этот пост в блоге чрезвычайно полезным: https://itnext.io/vue-js-and-webpack-4-from-scratch-part-3-3f68d2a3c127
Другой источник примеров — vue-кли. К сожалению, созданный шаблон чрезвычайно сложно расшифровать, потому что он требует тонны узловых модулей, каждый из которых вносит незначительное количество конфигурации, а также зависит от других модулей. Поэтому, если вы хотите создать что-то индивидуальное или на самом деле узнать, как все это работает вместе, это больше проблем, чем пользы.
Для вашей проблемы изучение шаблонного кода — хорошее начало github.com/vuejs-шаблоны. Хотя они все в webpack 3, но необходимые пакеты должны быть одинаковыми.