最近开发了一个h5的系统，用的是vite + vue3 + ts 开发的，

打包之后发现vite会将所有的js和css文件都打在一个文件夹下，assets目录，

所以 我总结了一份拆分js和css的配置，将js和css分别打在不同目录下

配置如下：

build: {
    chunkSizeWarningLimit: 1500,
    rollupOptions: {
      output: {
        // 最小化拆分包
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id.toString().split("node_modules/")[1].split("/")[0].toString()
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: 'js/[name].[hash].js',
        // 用于命名代码拆分时创建的共享块的输出命名
        // 　　chunkFileNames: 'js/[name].[hash].js',
        // 用于输出静态资源的命名，[ext]表示文件扩展名
        assetFileNames: '[ext]/[name].[hash].[ext]',
        // 拆分js到模块文件夹
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
          const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
          return `js/${fileName}/[name].[hash].js`;
 
在vite.config.js文件里添加build属性就好了，
 
 
打完之后就是这个样子
 
                                    针对更细粒度的拆包，Vite 的底层打包引擎 Rollup 提供了manualChunks，让我们能自定义拆包策略，它属于 Vite 配置的一部分，示例如下。build: {output: {// manualChunks 配置},},manualChunks 主要有两种配置的形式，可以配置为一个对象或者一个函数。我们先来看看对象的配置，也是最简单的配置方式，你可以在上述的示例项目中添加如下的manualChunks配置代码。
 这是一个使用创建的vite-react-tailwind-starter引导的 ， 和项目。
 :light_bulb: 即时服务器启动
 :high_voltage: 快如闪电的HMR
 :hammer_and_wrench: 丰富的功能
 :package: 优化的构建
 :nut_and_bolt: 通用插件接口
 :key: 全类型API
 请参阅上的部署
要克隆此模板，可以使用以下三种方法之一：
1.使用npx degit
npx degit https://github.com/theodorusclarence/vite-react-tailwind-starter my-app
 用您的应用程序名称替换my-app
2.使用此存储库作为模板
3.部署到celcel
运行应用程序
首先，安装所有依赖项，
npm i
 然后，运行开发服务器：
npm run dev
yarn dev
 用浏览器打开http：// localh
                                    如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换（例如 localsConvention: ‘camelCaseOnly’），你还可以使用按名导入。
什么是webpack?
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
学习官网：https://www.webpackjs.com/
打包方案
1.使用Gulp， 是基于 task 任务的；
2.使用Webpack， 是基于...
                                    vue3+vite的工程，普遍都会在项目public文件夹，创建一个config.js文件，存放一些配置态的数据，用于在产品上线后，可能会根据需要修改参数值，从而达到线上配置数据目的。修改一次还好，万一是迭代产品，后期维护每打包一次都需要修改哦，那不累死才怪！利用vite插件功能，打包时传入一个标记，区分是哪个公司，插件再根据标记写入不同的值到config.js中。具体实现如下，假设config.js内容是一个审核流程，A公司需要3级审核，B公司只需要2级审核。2、实例化插件，入参工程标记A。
                                    Vite配置如何优雅的code spliiting代码分割前端生态 rollup 和 webpack都有的概念。如果把所有代码都打包到一起，可能最终的代码非常大。从而影响加载时间。而且，很多代码是初始加载时，不需要的。因此，我们可以根据代码使用的紧急程度，将代码分割打包后，可以按需加载。.........
                                    最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下
一、首先修改config目录下的index.js文件
将其中build的配置项assetsPublicPath进行修改，改为
目的是将资源文件的引入路径，改为相对地址（相对index.html）
二、此时html中的js、css、img引入均没有问题，但是css中的background-image还是报404
此时的问题原因是，使用了相对地址后，在css进行引入的图片路径，其相对的是css文件的路径
# Rollup v0.60+ and v1+
npm install --save-dev rollup-plugin-scss
# Rollup v0.59 and below
npm install --save-dev rollup-plugin-scss@0
// rollup.config.js
import scss from 'rollup-plugin-scss'
export default {
  input : 'input.js' ,
  output : {
    file : 'output.js' ,
    format : 'esm'
  plugins : [
    scss ( ) // will output compiled styles to output.css
                                    升级到vue-cli3之后，默认编译是对代码进行分割，会生成许多chunk，有利于页面加载速度。
但是如果我们编译后的结果需要给第三方使用，比如前端微服务，这个时候，只提供一个js文件和css文件将更加方便也更加合理。
关闭方法：
vue.config.js文件中
    config.optimization.delete('splitChunks') //关闭代码分离，只生成一个j...