上一节咱们将了 webpack
的入口 entry
,那既然有入口,对应就会有进口。所以本节咱们来讲 webpack
中的进口 output
。
output
属性用于指定 webpack
如何输入、以及在哪里输入它所创立的 bundles
,以及如何命名这些文件。基本上整个应用程序构造都会被编译到指定的输入门路的文件夹中。咱们能够通过在配置文件中指定一个 output
字段,来配置这些处理过程。
output 输入配置
output
是一个 object
对象,其中蕴含一系列的配置项,其中比拟重要的是 filename
和 path
。
output.filename
:配置输入文件的名称,指定一个string
类型的值。如果只有一个输入文件,则能够把它写成动态不变的。output.path
:配置输入文件寄存在本地的目录,是一个string
类型的绝对路径。通常通过 Node.js 的path
模块去获取绝对路径。
在 webpack.config.js
配置文件中,一个 entry
对应一个 output
。
示例:
例如上面这段代码:
module.exports = {
entry:'./index.js',
output:{
path:__dirname,
filename:'./bundle.js'
}
}
代码中通过 entry
属性为 webpack
指定了一个入口文件 index.js
。通过 output
属性为 webpack
指定了一个进口文件,即 bundle.js
。
当 webpack
有多个 entry
的时候,一个 entry
应该对应一个 output
,此时输入的文件名须要应用替换符申明以确保文件名的唯一性。
示例:
module.exports = {
entry: {
app: './one.js',
search: './two.js'
},
output: {
path: __dirname + '/dist',
filename: '[name].js',
}
}
最终在我的项目根目录下的 dist
文件夹中生成 one.js
和 two.js
两个 bundle
文件。