Webpack打包修改文件名的完整指南

在进行Webpack项目构建时，开发者可以通过多种配置手段，针对不同类别的资源文件调整其最终输出的文件名或文件路径。

首先介绍使用copy-webpack-plugin插件处理文件复制的场景，核心在于配置from源路径与to目标路径。

new CopyPlugin({
  patterns: [
    {
      from: "**/**.txt",
      to: "xx/xx.ext"
    },
  ],
})

其次探讨如何修改JavaScript文件的输出文件名。

Webpack提供了output配置项，允许在此处指定JS文件的输出路径及文件名格式。

通过配置output对象的filename属性，可以动态指定入口文件的文件名及路径。常见的配置方式如filename: "[name].[chunkhash].js"所示，其中的name参数是控制文件名的关键，该name值可在entry入口配置中进行定义。

entry：{
    index: path.resolve(__dirname, './src/index.js'),
    youindex: path.resolve(__dirname, './src/index.js')
}

在entry配置中，还可以指定特定库或组件的文件进行单独打包。

entry：{
    ol: path.resolve(__dirname, './static/ol/ol_me.js'),
}

filename属性除了支持包含占位符的字符串格式，还可以接受一个函数。该函数接收的参数包含了打包文件的相关信息，利用这些信息可以自定义生成打包文件的输出名称。

output：{
    filename: (pathData) => {
        return pathData.chunk.name === 'main' ? utils.assetsPath('js/youfilename.js') : utils.assetsPath('js/[name].[chunkhash].js');
    }
}

filename字符串占位符解析后的结果，可以通过以下参数进行拼接或返回。

对于非入口文件（即按需引入的文件），可通过配置output对象的chunkFilename属性来动态修改其文件名及路径。常规配置如chunkFilename: "[name].[chunkhash].js"所示，其中的name同样是修改文件名的关键。

chunkFilename用于指定那些未列入entry配置但需要被打包输出的chunk文件的名称。output.chunkFilename默认值为[id].js，或者从output.filename推断出的值，其中id为输出文件的块ID，通常是从1开始递增的数字。除了[id]占位符，还可以配置[name]，[name]代表文件按需引入时配置的chunkName值；若未配置chunkName，[name]将被替换为[id]。

配置好chunkFilename后，需在文件按需引入时指定chunkName值。早期的按需引入使用require.ensure()，此处不再赘述。目前主流的按需引入方式采用import()，在import()调用中加入chunkFilename相关配置，即可修改打包后的文件路径和文件名，配置形式如/* webpackChunkName: “xxx” */所示。

const Login = () => import(/* webpackChunkName: "myLogin" */ '../components/login.vue')

在Webpack 4版本中，chunkFilename必须为字符串；而在Webpack 5中，它同样可以像filename一样设置为函数，以自定义文件路径和文件名。

chunkFilename字符串占位符解析结果与filename类似，可由以下参数拼接或返回。

接下来介绍如何修改CSS文件的输出文件名。

Webpack打包CSS文件需要借助插件。旧版Webpack曾使用extract-text-webpack-plugin，此处不再展开。当前Webpack推荐使用mini-css-extract-plugin进行CSS打包。

在mini-css-extract-plugin的配置中，同样包含filename和chunkFilename配置项，其具体用法与修改JS文件名的配置方式一致。

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
new MiniCssExtractPlugin({
    // Options similar to the same options in webpackOptions.output
    // both options are optional
    // filename: utils.assetsPath('css/[name].[contenthash].css'),
    filename: (pathData) => {
      return pathData.chunk.name == 'main' ? utils.assetsPath('css/youfilename.[hash].css') : utils.assetsPath('css/[name].[hash].css')
    },
    chunkFilename: (pathData) => {
      return utils.assetsPath('css/[id].[hash].css')
    },
})

此外，还需了解如何修改其他资源文件（如图片、视频等）的文件名。

Webpack打包图片等资源文件需使用url-loader或file-loader进行合理处理，其中url-loader内部封装了file-loader来执行处理逻辑。

Webpack中对图片等资源的打包配置位于module.rules中，通过rules中的options属性值，可将配置传递给url-loader或file-loader。file-loader的配置项中包含一个name属性，通过配置该name属性可修改打包文件的文件路径和文件名。name配置同样支持字符串占位符和函数两种形式，通常采用如下字符串形式进行配置。

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      // 10000字节以下的图片会被转换为base64编码
      limit: 10000,
      // 生成 name+7位hash+ext格式的文件名
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  }

其中[name]、[hash]等占位符的作用与filename中的占位符相同。除了字符串形式，还可以采用如下更灵活的函数形式进行配置。

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    // 10000字节以下的图片会被转换为base64编码
    limit: 10000,
    // 生成 name+7位hash+ext格式的文件名
    name: function(filepath){
        let filename = filepath.split('\\').pop()
        return process.env.NODE_ENV !== 'development' && filename == 'xxx.png' ? utils.assetsPath('img/youfilename.[ext]') : utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  }
},

至此，关于Webpack打包时如何修改文件名的实现示例介绍完毕。如需了解更多Webpack打包修改文件名的相关内容，请搜索本站历史文章或继续浏览后续相关文章，希望大家以后多多支持本站！