老师我想问下vue-cli里是如何把代码分割的，config里是单入口，也没有用import和require.ensure

来源：3-8 由浅入深 webpack - 代码分割和懒加载（2）

Sprash

2018-07-21

看了下vue-cli项目里的config文件，是单入口，然后自己写的业务代码部分，也并未用require.ensure和import（）。最后打包出来的项目结果却有三个js文件分别对应，业务代码，第三方代码和webpack配置代码

写回答

1回答

qbaty

2018-08-12

老版本的 vue-cli 你可以看看他里面的那个 webpack.pro.conf.js ，里面有一个规则

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
            module.resource && /\.js$/.test(module.resource) 
                && module.resource.indexOf(path.join(__dirname, '../node_modules')
            ) === 0
        )
    }
})

这一段代码的意思就是找到node_module 里引用代码单独提取打包

四大维度解锁Webpack3.0前端工程化

前端开发标配，灵活掌握Webpack3.0的使用可以极大的提高前端开发的效率

1188 学习 · 403 问题

查看课程

相似问题

3-8 由浅入深 webpack - 代码分割和懒加载（2）

回答 2

Vue+webpack一般是如何应用代码分割呢？

回答 1

SPA单页应用一定是单入口吗？

回答 1

babel-polyfill 使用的话只需要在入口文件中引入，其它的模块不需要引入的吗？

回答 2

webpack4中使用mini-css-extract-plugin提取css

回答 1

打开慕课网App查看更多内容