webpack-output的詳細配置

output的詳細配置

目錄結構：

 

 1> filename的配置

filename指的是出口文件的名稱

  // 出口文件

  output: {

    // 出口文件名稱

    filename: "build.js",

    // 智能合並路徑，絕對路徑

    path: resolve(__dirname,'build')

  },

如果是字符串命名，針對的是單一chunk模塊，如果有多個chunk模塊，此時就不能用字符串命名

如果返回的是帶有/的字符串，表示的是出口文件是有文件夾層級的

比如：

output: {
  // 出口文件的名稱
  filename: "a/b/c/build.js",
  path: resolve(__dirname,'build')
},

表示出口的文件是a文件夾內部的b文件夾內部的c文件夾內部的build.js文件中

如果入口entry是多chunk模塊

此時我們可以使用動態鍵表示文件的名稱

例如：

  // 入口文件
  entry: {
    fileA: './src/a.js',
    fileB: './src/b.js',
    fileC: './src/c.js'
  },

  // 出口文件
  output: {
    // 出口文件名稱
    filename: "[name].js",
    // 智能合並路徑，絕對路徑
    path: resolve(__dirname,'build')
  },

[]表示動態鍵，內部的參數是動態的

如果[]的內部是name，表示產生的chunk模塊的名稱就是多入口設置的名稱

 

 如果[]的內部是id，表示產生的chunk模塊的id就是多入口設置的名稱

 

 如果[]的內部是contenthash，表示產生的chunk模塊的hash文件名就是多入口設置的名稱

 

 filename的參數也可以是函數

  // 出口文件
  output: {
    // 出口文件名稱
    filename: (pathData) => {
      return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';
    },
  
    // 智能合並路徑，絕對路徑
    path: resolve(__dirname,'build')
  },

 

 

2>  path的配置

path配置的是絕對路徑，一般使用path模塊進行輔助配合

  // 出口文件
  output: {
    // 出口文件名稱
    filename: "[name].js",
    // 智能合並路徑，絕對路徑
    path: resolve(__dirname,'build')
  },

__dirname表示計算機的絕對地址

 

3>  publicPath的配置

publicPath表示設置的是相對的路徑地址，一般用於生產環境會

  // 出口文件
  output: {
    // 出口文件名稱
    filename: "[name].js",
    // 智能合並路徑，絕對路徑
    path: resolve(__dirname,'build'),
    publicPath: "/dist/"
  },

加了publicPath為/dist/之后，此時所有的靜態資源的引入都會加載/dist/前綴

 

 

4> chunkFilename的配置

import異步請求文件的方法

import("./a.js").then(({ defult: a }) => {
  console.log(a)
})

import()函數會返回一個promise對象，通過then來獲取值，此時表示異步請求數據，這樣的好處就是可以按需加載

異步和同步的區別就是同步一打開文件就必須加載，異步是按需要進行加載

比如異步的小例子：隨機數如果為偶數則表示請求文件

var num = parseInt(Math.random() * 10)
if (num % 2==0) {
  import("./a.js").then(({ defult: a }) => {
    console.log(a)
  })
}
console.log(a)

 chunkFilename表示非入口文件的引用異步加載生成chunk的重命名

 // 出口文件
  output: {
    // 出口文件名稱
    filename: "[name].js",
    // 智能合並路徑，絕對路徑
    path: resolve(__dirname,'build'),
    chunkFilename:"[name]_chunk.js"
  },

index.js

import("./a.js").then(({ defult: a }) => {
  console.log(a)
})