vite和webpack打包结构控制

概述

在工程化项目中，Vite 和 Webpack 作为当前最流行的两大构建工具，它们在打包输出目录结构的配置上各有特点，webpack和vite默认打包构建的输出目录结构可能不满足我们的需求，因此需要根据实际情况进行控制。

默认输出结构对比

webpack

默认情况下，基本上都不会根据情况进行分块，所有资源都是默认被打包到了一个文件中。

js 复制代码

dist/
  ├── main.js
  ├── index.html
  |------ .....

vite

js 复制代码

dist/
  ├── assets/
  │   ├── index.[hash].js
  │   ├── vendor.[hash].js
  │   └── style.[hash].css
  └── index.html

Vite目录结构精细控制

文件指纹策略

Webpack 提供了多种 hash 类型：

[hash]: 项目级hash
[chunkhash]: chunk级hash
[contenthash]: 内容级hash

基础配置方案

js 复制代码

// vite.config.js
export default {
  build: {
    outDir: 'dist',
    assetsDir: 'static',
    emptyOutDir: true
  }
}

Rollup 输出配置

由于vite内部打包使用rollup，因此打包输出相关配置需参考rollup的配置

js 复制代码

export default {
  build: {
    rollupOptions: {
      output: {
          //资源块输出目录配置
        chunkFileNames: 'static/js/[name]-[hash].js',
        //入口文件输出目录配置
        entryFileNames: 'static/js/[name]-[hash].js',
        //静态输出目录配置（图片、音频、字体）
        assetFileNames: ({ name }) => {
          const ext = name.split('.').pop()
          //函数形式动态返回文件输出名及其位置
          return `static/${ext}/[name]-[hash].[ext]`
        }
      }
    }
  }
}

webpack 目录结构精细控制

基础输出配置

js 复制代码

// webpack.config.js
module.exports = {
  output: {
    path: path.resolve(__dirname, 'build'), // 修改输出目录
    filename: 'js/[name].[contenthash:8].js', // JS文件输出路径
    chunkFilename: 'js/[name].[contenthash:8].chunk.js', // 异步chunk
    assetModuleFilename: 'media/[name].[hash:8][ext]', // 静态资源
    clean: true // 构建前清空目录
  }
}

高级资源管理

使用 mini-css-extract-plugin 控制 CSS 输出：

js 复制代码

  module: {
    rules: [
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] },
     
    ],
  },

Webpack 5 引入了资源模块类型，取代了传统的 file-loader/url-loader，用来处理之前繁琐的配置

js 复制代码

 module: {
   rules: [
{
       test: /.(png|jpe?g|gif|svg)$/i,
       type: 'asset/resource' // 替换 file-loader
     },
     {
       test: /.(mp4|webm|ogg)$/i,
       type: 'asset/resource'
     }
   ],
 },

四种资源模块类型

类型	作用	等价 loader
`asset/resource`	导出单独文件并生成 URL	file-loader
`asset/inline`	导出资源的 Data URI	url-loader
`asset/source`	导出资源的源代码	raw-loader
`asset`	自动选择 resource 或 inline	url-loader + 限制

总结

上面列举的部分配置，更多的详细配置，可以查阅官网解析。