乐趣区

关于webpack:webpack打包时如何修改文件名

在应用 webpack 进行我的项目打包的时候,咱们可通过以下形式对不同类型的资源,进行文件名或文件门路的批改

1、应用 copy-webpack-plugin 插件复制的文件,这个就是配置 from 和 to

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

2、批改 js 文件的文件名
在 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 一样,能够由以下参数拼接或者返回:

3、批改 css 文件的文件名
webpack 对 css 文件的打包须要用到插件,之前的 webpack 应用 extract-text-webpack-plugin 进行 css 文件打包,这里不讲了,当初的 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')
    },
})

4、批改其余资源文件(图片、视频等)的文件名
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]')
    }
  }
},
退出移动版