在应用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]') } }},