Output

Entry决定了构建的入口即输入，而Output就是输出，使用该选项可以决定输出资源的存在形式，例如输出文件名称，输出路径等等。

默认的输出路径和输出文件名

Output具有默认配置，下面的代码等效于默认配置中的输出路径和文件输出的名称：

module.exports = {
    
    
    mode: 'production',
    entry: './src/index.js',
    output: {
    
    
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
}

该Output配置规定了输出文件的名称为main.js,输出文件的输出路径为当前项目根目录下的dist目录。

Filename

Filename规定了输出文件的文件名称以及文件类型。Filename可以设置如下表几种方式：
在这里插入图片描述
使用类似hash,chunkhash这种方式（模版字符串）设置文件名称，是为了避免浏览器的缓存机制带来的影响。Webpack内部通过TemplatedPathPlugin插件来实现模版字符串的功能。

可以使用类似[hash:number]的方式来指定生成相关hash的长度（默认为20），例如 [hash:16]。通过指定output.hashDigestLength可以在全局配置相关hash的长度。

Path

Path规定了输出文件的路径，对应一个绝对路径：

const path = require("path");

module.exports = {
    
    
    output: {
    
    
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist') // 默认值
    }
}

可以结合hash来动态输出路径，避免缓存的干扰。

const path = require("path");

module.exports = {
    
    
    output: {
    
    
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist-[hash]')
    }
}

ChunkFilename

ChunkFilename决定了项目运行时异步加载的文件（非入口文件）名称。ChunkFilename的配置方式参考Filename。

// 配置信息
const path = require("path");

module.exports = {
    
    
    output: {
    
    
        filename: 'main.js',
        chunkFilename: '[id].async.js',
        path: path.resolve(__dirname, 'dist-[hash]')
    }
}

// 示例代码
const btn = document.getElementById('btn');
btn.onclick = () => {
    
    
    import('./a').then(res => {
    
     })
}

按钮发生点击事件才会去加载模块a，这是一个异步加载的过程。此处加载的文件名称就是由ChunkFilename决定的。

PublicPath

PublicPath选项决定了项目运行时相关资源文件加载的路径，其默认值是一个空字符串 “”。设置PublicPath值以后，构建项目构建出的资源被引入路径会发生变化，所以应当谨慎设置该值，避免找不到加载的资源而导致的404错误。Webpack中常用的Webpack-dev-server（本地搭建一个服务器，来运行项目，方便项目的调试）模块加载资源的路径也是以PublicPath为基准，来加载文件。

module.exports = {
    
    
    output: {
    
    
        // 在此设置路径
        publicPath: 'https://www.render.com'
    }
}

假设在没有配置PublicPath之前，HTML文件中引入输出文件的路径为main.js，在配置之后，地址将会变成https://www.render.com/main.js。

在编译时无法知道输出文件的PublicPath的情况下，可以留空，然后在入口文件处使用自由变量__webpack_public_path__，以便在运行时进行动态设置，例如：webpack_public_path = myPath。

CrossOriginLoading

Webpack通过JSONP实现对相关文件的异步加载，JSONP的原理是动态的向HTML中插入一个script标签去加载异步资源。CrossOriginLoading则是用于配置这个异步插入的script标签的CrossOrigin值。

启用cross-origin属性加载chunk。以下是可设置的值：

crossOriginLoading: false - 禁用跨域加载（默认）。
crossOriginLoading: “anonymous” - 不带凭据(credential)启用跨域加载。
crossOriginLoading: “use-credentials” - 带凭据(credential)启用跨域加载with credentials。

module.exports = {
    
    
    output: {
    
    
        crossOriginLoading: 'use-credentials'
    }
}

通常设置cross-origin的值来获取异步加载的脚本执时的详细错误信息。

Library和LibraryTarget

Webpack构建出的项目就是一个库，LibraryTarget决定了库的类型，例如指定libraryTarget：commonjs，表示导出遵循CommonJs模块规范的库。而Library指定了导出库的名称。两者的结合使用可以构建出适应对应场景的库。

下表中列出libraryTarget支持的几种配置：
在这里插入图片描述
其中_entry_return_表示入口文件输出后的返回结果。

const path = require("path");

module.exports = {
    
    
    mode: 'production',
    entry: './src/index.js',
    output: {
    
    
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'MyModule',
        libraryTarget: 'var'
    }
}

构建完成后入口文件的输出结果赋值给变量MyModule，项目引入该库后，可以在全局访问MyModule，实现一些操作。

还可以将Library指定为一个对象，用于给每个构建目标（Target）起不同的名称。

const path = require("path");

module.exports = {
    
    
    mode: 'production',
    entry: './src/index.js',
    output: {
    
    
        library: {
    
    
            root: "MyLibrary",
            amd: "my-library",
            commonjs: "my-common-library"
        },
        libraryTarget: "amd"
    }
}

更多Output相关配置请查阅：https://webpack.js.org/configuration/output/

本本章节提供案例源码下载：https://gitee.com/mvc_ydb/webpack/blob/master/output.zip

6 Webpack中的配置-Output