webpack系列教程之output

来瓶二锅头00
339 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。 上一篇我们说到了入口（entry）,这一章我们将深入了解output

前言

我们前面说到了，webpack是通过ooutput来控制输出的，详见webpack初体验（一）。我们可以通过配置output来控制我们需要输出的文件地址以及名称。前面我们entry我们知道会有多个，但是无论入口有几个，output永远只有一个

语法

output的语法为

outpou:{
    filename:string|Function;
    path:string;
    publicPath?:string;
    [keyName:string]?:string|Object
}

我们可以看到常需要的配置有两个，其他的配置是根据自己的需求去额外配置的。下面我们来一一看所需要的配置信息

filename

filename用来输出文件的文件名，此值可以是一个静态的名称也可以是通过webpack自带的一些方法生成的唯一名称

静态名称

静态名称顾名思义就是指定为一个固定的名称，不会动态的改变。例如：

module.export = {
    output:{
        filename:'bundle.js'
    }
}

上面的配置表明需要将生成的包的名称命名为bundle.js

动态唯一名称

动态唯一名称一般是当入口有多个。或者我们将代码进行拆分或者是通过插件来创建多个包的时候，我们如果通过静态名称满足不了，这个时候就需要通过webpack自带的一些方法来赋予每一个bundle一个唯一的名称。一般是通过模板字符串的方式。 webpack自带的模板字符串有

模板字符串描述
[hash:number]模板标识符的hash值,长度可以指定，默认20位
[chunkhash:number]chunk内容的hash值,长度可以指定，默认20位
[name]模板入口的名称
[id]模块标识符
[query]模块的query,类比get请求，?后面的字符串

因此我们可以通过上面的模板字符串来进行配置，例如：

  1. 使用入口名称
module.export = {
    entry:{
        index:'./src/index.js',
        index1:'./src/index1.js'
    },
    output:{
        filename:[name].bundle.js
    }
}

按照上面的配置，将会生成两个文件，名称分别为：index.bundle.js和index1.bundle.js。

  1. 使用模块id
module.export = {
    entry:{
        index:'./src/index.js',
        index1:'./src/index1.js'
    },
    output:{
        filename:[id].bundle.js
    }
}

按照上面的配置，将会生成两个文件，名称分别为：index.bundle.js和index1.bundle.js。这样看来和[name]生成的名称是一样的。是的，在明确知道入口以及chunk的情况下是相同的，但是对于没有列在entry中，但是又会打包成chunk的的话，就不一样了。

  1. hash
module.export = {
    entry:{
        index:'./src/index.js',
        index1:'./src/index1.js'
    },
    output:{
        filename:[name].[hash:16].bundle.js
    }
}

最终生成两个文件，名称分别为index.16位的hash值.bundle.js和index1.16位的hash值.bundle.js 4. chunkhash

module.export = {
    entry:{
        index:'./src/index.js',
        index1:'./src/index1.js'
    },
    output:{
        filename:[chunkhash].bundle.js
    }
}

最终生成两个文件，名称分别为20位的hash值.bundle.js和20位的hash值.bundle.js

  1. query 同上面的方法一样去配置，一般不是通过显示配置，一般是引用的第三方文件可能会使用到。

以上是filename的配置，但是对于按需加载的模块，则需要通过配置chunkFilename配置，对于loader使用的文件则需要在loader中进行配置

path

output目录对应的一个绝对路径。默认路径为dist，例如：

module.export = {
    output: {
        path:'固定的地址'
    }
}

或者可以通过node的path.resolve来生成一个绝对路径，例如：

const path = require('path')
module.export = {
    output:{
        path:path.resolve(__dirname,'dist')
    }
}

上面的配置是将在根目录（__dirname指向的为项目的根目录）创建一个dist的绝对路径

publicPath

对于我们按需加载以及一些静态资源文件（例如：图片，视频等），我们需要通过publicPath配置来配置静态资源目录。通过此配置我们可以指定在浏览器中所引用的资源的相对与访问URL的相对位置。例如：我们的项目假设部署在https://test.com中，我们指定静态资源位置在assets中，但是我们使用的是相对路径，最终访问的其实是https://test.com/assets/中。说简单点也就是通过以path配置的URL中的HTML页面为准线

默认情况下，此值为空字符串。例如：

module.export = {
    output:{
        publicPath:'assets/' //相对于所需要访问的html页面
        publicPath:'/assets/'//相对于服务,上面说到的例子
        publicPath:'../assets/'//相对于所需要访问的html页面
        publicPath:""//相对于所需要访问的html页面
    }
}

chunkFilename

前面说到filename配置的是入口文件的输出文件，但是对于按需加载等那些非入口文件的chunk的名称如何配置呢？这就需要y用到chunkFilename了。具体配置和filename配置选项相同。默认使用的是[id].js.

以上是output的常见的一些配置说明，当然配置不仅仅这些。详细的可参考webpack官网配置output

至此关于output的常见配置说明结束，下一章我们将一起看看loader的常见配置以及说明

avatar
文章
阅读
粉丝