[webpack4] 输出(output)

输出(output)

原谅链接：输出(output)

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但是只能指定一个输出配置。

用法(Usage)

在webpack中配置output属性的最低要求是，将它的值设置为一个对象，包括以下两点：

• filename用于输出文件的文件名
• 目标输出目录path的绝对路径

webpack.config.js

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

此配置将一个单独的index.js文件输出到C:\jianglei\webpack\plugins-01\dist的绝对目录中。

多个入口起点

如果配置创建了多个单独的"chunk"（例如，使用多个入口起点或使用像CommonsChunkPlugin 这样的插件），则应用使用占位符（substitutions）来确保每个文件具有唯一的名称。

const config = {
    mode: "development",
    entry: {
        main: './index.js',
        jquery: './jquery.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js',
    }
};

module.exports = config;

高级进阶

以下是使用CDN和资源hash的复杂示例：
webpack.config.js

const path = require('path');


const config = {
    mode: "development",
    entry: {
        main: './index.js',
        jquery: './jquery.js'
    },
    output: {
        path: path.resolve(__dirname, './dist/[hash]'),
        publicPath: "http://cdn.example.com/assets/[hash]/",
        filename: '[name].js',
    }
};

module.exports = config;

在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath，你可以先忽略它，并且在入口起点设置 webpack_public_path。

__webpack_public_path__ = myRuntimePublicPath

// 剩余的应用程序入口