输出(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
// 剩余的应用程序入口