在使用webpack進(jìn)行項(xiàng)目打包的時(shí)候，我們可通過(guò)以下方式對(duì)不同類型的資源，進(jìn)行文件名或文件路徑的修改

1、使用copy-webpack-plugin插件復(fù)制的文件，這個(gè)就是配置from和to

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

2、修改js文件的文件名

在webpack中有一個(gè)output的配置項(xiàng)，可以在這里配置js文件的文件路徑和文件名

修改入口文件的文件名通過(guò)配置output的filename屬性，可以動(dòng)態(tài)的改變?nèi)肟谖募奈募窂胶臀募?，通常的我們?huì)這樣設(shè)置filename: "[name].[chunkhash].js"，而其中的name就是文件名修改的關(guān)鍵，這個(gè)name我們可以在entry入口中進(jìn)行定義

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

在entry中也可以配置某一個(gè)庫(kù)/組件的文件進(jìn)行打包

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

filename除了可以設(shè)置類似占位符格式的字符串，還可以是一個(gè)函數(shù)，函數(shù)第一個(gè)參數(shù)中包含了打包文件的一系列信息，根據(jù)這些信息，可以去自定義打包文件的輸出名稱

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

filename占位符字符串對(duì)應(yīng)的結(jié)果可以由以下參數(shù)拼接或者返回

修改非入口（按需引入）文件的文件名通過(guò)配置output的chunkFilename 屬性，可以動(dòng)態(tài)的改變非入口文件的文件路徑和文件名，通常的我們會(huì)這樣設(shè)置chunkFilename: "[name].[chunkhash].js"，而其中的name就是文件名修改的關(guān)鍵。

chunkFilename 指未被列在 entry 中，卻又需要被打包出來(lái)的 chunk 文件的名稱，output.chunkFilename 默認(rèn)使用[id].js或從 output.filename 中推斷出的值，id是輸出文件的塊id，一般是從1開(kāi)始疊加的數(shù)字，除了[id]還可以配置占位符[name]，[name]是文件按需引入時(shí)配置的chunkName值，如果沒(méi)有配置chunkName，[name] 會(huì)被預(yù)先替換為 [id]。

配置好chunkFilename后，還需要在文件按需引入時(shí)配置chunkName值，早期的按需引入使用require.ensure()，這就不說(shuō)了，現(xiàn)在按需引入基本都是使用import()，在import()中我們加入chunkFilename 的配置，就可以修改打包后的文件路徑和文件名，配置以/* webpackChunkName: “xxx” */的形式存在

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

在webpack 4的版本中chunkFilename必須是一個(gè)字符串，但是在webpack 5中，他也可以像filename一樣設(shè)置一個(gè)函數(shù)，去自定義文件路徑和文件名。

chunkFilename字符串占位符對(duì)應(yīng)的結(jié)果和filename一樣，可以由以下參數(shù)拼接或者返回

3、修改css文件的文件名

webpack對(duì)css文件的打包需要用到插件，之前的webpack使用extract-text-webpack-plugin進(jìn)行css文件打包，這里不講了，現(xiàn)在的webpack使用mini-css-extract-plugin進(jìn)行css文件打包。

在mini-css-extract-plugin的配置中，同樣有關(guān)于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對(duì)圖片等資源文件的打包需要用到url-loader 或者 file-loader 去合理地處理它們，而url-loader內(nèi)部也是封裝了file-loader去處理

webpack中對(duì)圖片等資源的打包配置在module.rules中，rules中可以通過(guò)options屬性值，把配置傳遞給url-loader或者file-loader。file-loader的配置項(xiàng)中有一個(gè)屬性name，我們可以通過(guò)配置這個(gè)name屬性來(lái)修改打包文件的文件路徑和文件名，name的配置同樣支持字符串占位符和函數(shù)兩種形式，通常我們像下面一樣配置字符串的形式

{
? ? test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
? ? loader: 'url-loader',
? ? options: {
? ? ? // 10000字節(jié)以下的圖片會(huì)被轉(zhuǎn)換為base64編碼
? ? ? limit: 10000,
? ? ? // 生成 name+7位hash+ext格式的文件名
? ? ? name: utils.assetsPath('img/[name].[hash:7].[ext]')
? ? }
? }

其中[name]、[hash]等占位符都和filename的占位符一樣
除了字符串形式，還可以像下面一樣配置更靈活的函數(shù)形式

{
? test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
? loader: 'url-loader',
? options: {
? ? // 10000字節(jié)以下的圖片會(huì)被轉(zhuǎn)換為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]')
? ? }
? }
},

 到此這篇關(guān)于webpack打包時(shí)如何修改文件名的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)webpack打包時(shí)修改文件名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論