在 Webpack 中,输出(Output)是指将打包后的代码输出到一个指定的目录中。通过配置输出,我们可以控制打包后文件的名称、路径以及其他相关的选项。
输出配置
在 webpack 的配置文件中,我们可以通过 output
属性来配置输出的相关选项。下面是一个示例的 output
配置:
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - -- ---- ------ ----------------- -- ---- ------- - -- ---- ----- ----------------------- -------- -- ----- --------- ------------ -- ---- ----------- --- - --
在上面的配置中,我们指定了打包后的文件输出到 dist
目录中,文件名为 bundle.js
。同时,还可以通过 publicPath
属性指定静态资源的公共路径。
文件名
Webpack 支持使用占位符来动态生成输出的文件名。常用的占位符有:
[name]
:模块名称[id]
:模块标识符[hash]
:编译的哈希值[chunkhash]
:模块的哈希值
下面是一个使用占位符的示例:
output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash].js' }
多入口文件
如果项目中有多个入口文件,可以使用对象的方式来配置输出:
-- -------------------- ---- ------- -------------- - - -- ----- ------ - ---- --------------- ------- ----------------- -- ------- - ----- ----------------------- -------- --------- ------------------ - --
在上面的配置中,我们指定了两个入口文件分别为 app.js
和 vendor.js
,打包后会生成两个对应的输出文件。
以上就是关于 Webpack 输出的介绍,通过合理的配置输出选项,我们可以更好地控制打包后文件的生成方式。