webpack4 代码分离

最新推荐文章于 2023-12-14 16:05:43 发布

原创

最新推荐文章于 2023-12-14 16:05:43 发布 · 828 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #vue #vue-cl3.x

本文讲述了在升级到@vue-cli3后，作者在理解与应用webpack代码分离过程中遇到的问题及解决方案。通过MiniCssExtractPlugin整合多余的CSS，并探讨了import()动态导入在代码分离中的关键作用，最终实现按需打包第三方库与业务代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前沿

刚开始将vue-cli版本升级到@vue-cli3版本时，查看@vue-cli3文档时，知道它会实现代码分离，自己写的demo时，打包时生成了大量的chunk文件，当时并没有想太多，觉得自己使用@vue-cli3版本成功，就以为自己掌握了它。直到开发项目时，需要处理项目中的chunk，只需要保留第三方vendor和本身的业务代码，这个时候自己去研究webpack和vue-cli才发现自己时井底之蛙，一直只是停留在使用的程度上，离真正的掌握还很遥远。下面是我处理该问题的思路。

MiniCssExtractPlugin

刚开始处理时，想一步一步来处理，先处理css，将所有多与的css整合到一个完成的css文件中，
这个时候，跟公司的老哥交流了一下，感谢他跟我讲了他经验，收益良多。他让我看看MiniCssExtractPlugin,webpack4专门用来处理css的插件，
由于当前使用的是vue-cli3,它的vue.config.js配置想需要在chainWebpack中操作，于是参考了文档中以下的代码：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;