重构Webpack系列之三 ----出口（output）

重构Webpack系列之三 ----出口（output）

一、概念

Webpack可以通过配置output选项，告知程序如何向硬盘写入编译后的文件。注意，即使可以存在多个entry起点，但也只能指定一个output配置。

备注：以下代码均在webpack.config.js文件进行编辑。

在webpack配置中，output属性的最低要求是，将它的值设置为一个对象，然后为将输出的文件名配置一个output.filename:

module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

二、基本用法

1. filename选项
   此选项决定了输出的bundle的名称。这些bundle将写入到output.path选项指定的目录下：

module.exports = {
  output: {
    filename: 'filename.js'
  }
}

2. path选项
   此选项可以设置bundle的输出目录，配置path选项时，注意需填入绝对路径：

module.exports = {
  output: {
    filename: 'bundle.js',
    // 写入到硬盘./src/dist/bundle.js
    path: path.resolve(__dirname, '/src/dist')
  }
}

3. publicPath选项
   path是指定打包的”储存“路径，publicPath是指定包的”访问“路径。webpack进行打包的时候会把publicPath指定的路径添加到静态资源路径前面。publicPath 并不会对生成文件的路径造成影响，主要是对你的页面里面引入的资源的路径做对应的补全，常见的就是css文件里面引入的图片。

module.exports = {
  output: {
    path: path.resolve(__dirname, '/src/dist'),
    publicPath: '/src/dist'
  }
}

webpack-dev-server也会默认从publicPath为基准，使用它来决定在哪个目录下启用服务。但devServer的配置里面也有一个devServer.static.publicPath，这个选项的作用是告诉服务器在哪个URL上提供静态资源的内容。我们需要做好区分。

4. clean选项
   在生成文件之前是否选择清空output目录，可以是布尔值也可以是对象，对象还可以配置一些其他参数。

module.exports = {
  output: {
    clean: true
  }
}

5. library
   为你的入口做导出，输出为一个库，通常用来打包第三方资源包或者其他vendor。

module.exports = {
  // …
  entry: './src/index.js',
  output: {
    library: 'MyLibrary',
  },
};

三、多个入口输出

在我们使用 webpack 来打包我们的模块化后的应用程序时，webpack 会生成一个可部署的 /dist 目录，然后把打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到 server 上，client（通常是浏览器）就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当你需要获取新的代码时，就会显得很棘手。

也就是说，我们想要更新代码时，就要让相对应打包后的文件保持改变，通常是通过修改文件名来告知webpack哪个文件改变了。

如果配置中创建出多于一个“chunk”（例如使用多个入口起点、代码拆分（code splitting）或使用像CommonsChunkPlugin这样的插件）创建多个bundle，则应该使用占位符来确保每个文件具有唯一的名称。

1. 使用入口名称

module.exports = {
  output: {
    filename: '[name].bundle.js'
  }
}

2. 使用内部chunk id

module.exports = {
  output: {
    filename: '[id].bundle.j'
  }
}

3. 使用由生成的内容产生的hash

module.exports = {
  output: {
    filename: '[contenthash].bundle.js'
  }
}

4. 结合多个替换组合使用

module.exports = {
  output: {
    filename: '[name].[contenthash].bundle.js'
  }
}

5. 使用函数返回filename

module.exports = {
  output: {
    filename: (pathData) => {
      return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js'
    }
  }
}

注意，此选项不会影响那些按需加载chunk的输出文件。它只影响最初加载的输出文件。对于按需加载的chunk文件，请使用output.chunkFilename选项来控制输出。通过loader创建的文件也不受影响。

四、配置CDN实例

以下是对资源使用 CDN 和 hash 的复杂示例：

module.exports = {
  //...
  output: {
    path: '/home/proj/cdn/assets/[fullhash]',
    publicPath: 'https://cdn.example.com/assets/[fullhash]/',
  },
};

这里官方说明的也马马虎虎的，待之后实验过后为大家分享_{就麻烦各位看官点点赞吧！多多支持前端菜鸟}