从浏览器到Webpack的Vue.js

Question

当前，我们当前的构建过程使用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');

Answer 1

最近对Vue + Webpack进行了类似的迁移，我发现此博客文章非常有帮助： https ://itnext.io/vue-js-and-webpack-4-from-scratch-part-3-3f68d2a3c127

例子的另一个来源是vue-cli 。 不幸的是，生成的样板非常难以解密，因为它需要大量的节点模块，这些节点模块都贡献少量的配置，并且还依赖于其他模块。 因此，如果您要构建自定义的内容或实际学习它们如何协同工作，那么麻烦就多于其价值。