Vue.js 从 Browserify 到 Webpack答案

【问题标题】：Vue.js from Browserify to WebpackVue.js 从 Browserify 到 Webpack
【发布时间】：2019-07-18 11:59:07
【问题描述】：

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

【问题讨论】：

对于您的问题，从样板中学习是一个好的开始github.com/vuejs-templates。虽然它们都在 webpack 3 中，但必要的包应该是相似的。
@blaz 是的，我在解决这个问题上取得了很好的进展。似乎写一个关于 SO 的问题足以让我开始取得进展。
我想出了一个解决方案，当我有时间时，我会写下带有来源链接的答案。

标签： javascript vue.js webpack vuejs2 webpack-4

【解决方案1】：

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

另一个示例来源是vue-cli。不幸的是，生成的样板文件非常难以破译，因为它需要大量的节点模块，这些模块都贡献了极少量的配置，并且还依赖于其他模块。因此，如果您想构建定制的东西或真正了解它们是如何协同工作的，那么麻烦大于价值。

【讨论】：