Home Articles

Vue.js和Webpack,如何构建可移植性组件

Asked
Viewed 1767 times
0

假设我有2个Vue.js应用程序:app1和app2 .

两者都实现单文件组件方法,并由webpack构建到相应的/dist/build.js中 .

现在我需要在app2中使用在app1内部开发的组件,所以我想知道:有没有办法指示webpack不将整个app1构建到单个/dist/build.js中,而是生成N个不同的“构建”js文件来分离可重用组件,以便我可以,例如,取出app1 / dist / components.build.js并以某种方式直接导入app2,而不会在那里复制.vue文件?

我对Vue和Webpack很新,所以我甚至不确定这个问题是否有意义......

1 Answer

  • 0

    Webpack支持代码分割,实际上是它提供的更酷的功能之一 .

    你的webpack配置看起来像这样:

    module.exports = {
        entry: {
            app1: 'path/to/app1/dir',
            app2: 'path/to/app2/dir/excluding/chunked/component',
            app3: 'path/to/app2/chunked/component',
        },
        plugins: [
            new HtmlWebpackPlugin({ title: 'Code Split' }),
            new webpack.optimize.CommonsChunkPlugin({
               name: 'common' // Specify name for your common app modules 
                              // i.e vendors, etc.
            })
        ],
        output: [
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        ]
    }
    

    这样的事情应该实现你的目标 . 它可能需要一些调整,但你应该能够隔离你想要的组件并提取它,同时保持捆绑所有常见的代码 .

Related