webpack打包時如何修改檔名

hfhan發表於2022-06-14

在使用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佔位符字串對應的結果可以由以下引數拼接或者返回:
image.png

修改非入口(按需引入)檔案的檔名
通過配置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一樣,可以由以下引數拼接或者返回:
image.png

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