美文网首页
webpack output出口

webpack output出口

作者: 前白 | 来源:发表于2021-06-18 12:08 被阅读0次

    上一节我们将了 webpack 的入口 entry,那既然有入口,对应就会有出口。所以本节我们来讲 webpack 中的出口 output

    output 属性用于指定 webpack 如何输出、以及在哪里输出它所创建的 bundles,以及如何命名这些文件。基本上整个应用程序结构都会被编译到指定的输出路径的文件夹中。我们可以通过在配置文件中指定一个 output 字段,来配置这些处理过程。

    output输出配置

    output 是一个 object 对象,其中包含一系列的配置项,其中比较重要的是 filenamepath

    • 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.jstwo.js 两个 bundle 文件。

    相关文章

      网友评论

          本文标题:webpack output出口

          本文链接:https://www.haomeiwen.com/subject/boukyltx.html