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)
})