output

配置output选项可以控制webpack如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。

开始

单页面

const Path = require("path");

module.exports = {
  entry: Path.resolve(process.cwd(),'./index.js'),
  output: {
    filename: '[name].js',  // 或者 filename: 'js/[name].js'
    path: Path.resolve(process.cwd(),"build"),
  },
};

多页面

const Path = require("path");

module.exports = {
  entry: {
    pageOne:Path.resolve(process.cwd(),"./src/pageOne/index.js"),
    pageTwo:Path.resolve(process.cwd(),"./src/pageTwo/index.js"),
    pageThree:Path.resolve(process.cwd(),"./src/pageThree/index.js"),
  },
  output: {
    filename: '[name].js',  // 或者 filename: 'js/[name].js'
    path: Path.resolve(process.cwd(),"build"),
  },
};

分离 app(应用程序) 和 vendor(第三方库) 入口

vendor 可以在 vendor.js 中存入未做修改的必要 library 或文件（例如 Bootstrap, jQuery, 图片等），然后将它们打包在一起成为单独的 chunk。内容哈希保持不变，这使浏览器可以独立地缓存它们，从而减少了加载时间。

配置如下:

entry: {
  index: Path.resolve(process.cwd(), "./src/index.js"),
  vendor: ['lodash'],
},
output: {
  path: Path.resolve(process.cwd(), "./build"),
  filename: "[name].[chunkhash].js", // 或者 filename: "js/[name].[chunkhash].js",
}

配置细节:

output.filename 中的文件名字:
- 如果为[name].[hash].js: 那么 app 应用程序中的任何文件发生变化，整个项目的 hash 会重新生成，那么第三方库的缓存会失效，也会重新打包编译(我们希望的是 app 应用程序无论如何变化，不会影响第三方库的缓存)
- 如果为[name].[chunkhash].js: app 的 chunk引用的模块与第三方库的 chunk引用的模块互不影响，所以 app 应用程序的改变不会影响第三方库的缓存
- 如果为[name].[contenthash].js: app 的 chunk模块内容与第三方库的 chunk模块内容互不影响，所以 app 应用程序的改变不会影响第三方库的缓存
综上所述: output.filename 最好为 [name].[chunkhash].js 或者 [name].[contenthash].js

配置项

output.publicPath

output.publicPath 此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」。相对 URL(relative URL) 会被相对于 HTML 页面（或 <base> 标签）解析。相对于服务的 URL(Server-relative URL)，相对于协议的 URL(protocol-relative URL) 或绝对 URL(absolute URL) 也可是可能用到的，或者有时必须用到，例如：当将资源托管到 CDN 时。

语法

output: {
  path: Path.resolve(process.cwd(), "./build"),
  filename: "index.js",
  publicPath:'/'
}

场景

部署页面时，都需要将 publicPath 更改为 /

output: {
  path: Path.resolve(process.cwd(), "./build"),
  filename: "index.js",
  publicPath:'/'
}

output.library

output.library 配置导出库的名称

output.libraryExport

output.libraryExport 配置要导出的模块中哪些子模块需要被导出。它只有在output.libraryTarget被设置成commonjs或者commonjs2时才有意义。

output.libraryTarget

output.libraryTarget 配置以何种方式导出库。可以使用下面的选项中的任意一个。注意，此选项与分配给 output.library 的值一同使用。

语法

libraryTarget: "var": 只能以script标签的形式引入模块依赖。编写的库将通过 var 赋值给通过 library 指定名称的变量。

index.js 入口文件如下:

module.exports = {
  name:"Index 库",
  say(){
    console.log('Index 库');
  }
}

webpack.config.js配置如下:

const Path = require("path");

module.exports = {
  entry: Path.resolve(__dirname, "src", "index.js"),
  output: {
    filename: "index.js",
    path: Path.resolve(__dirname, "build"),
    library: "Index",
    libraryTarget: "var",
  },
  mode: "development",
};

生成的output如下:

var Index;
(() => {
  var __webpack_modules__ = {……};
  var __webpack_module_cache__ = {};
  function __webpack_require__(moduleId) {……}
  var __webpack_exports__ = __webpack_require__("./src/index.js");
  Index = __webpack_exports__;
})();

其他项目引用该库时的方式: 通过script标签
```
<script src="该库的路径"></script>
```

libraryTarget: "commonjs": 只能按照 commonjs 的规范来引入我们的库。编写的库将通过 CommonJs 规范导出。如果libraryTarget: "commonjs2",那么output.library 会被省略,commonjs 的话不会省略。

index.js 入口文件如下:

module.exports = {
  name:"Index 库",
  say(){
    console.log('Index 库');
  }
}

webpack.config.js配置如下:

const Path = require("path");

module.exports = {
  entry: Path.resolve(__dirname, "src", "index.js"),
  output: {
    filename: "index.js",
    path: Path.resolve(__dirname, "build"),
    library: "Index",
    libraryTarget: "commonjs",
  },
  mode: "development",
};

生成的output如下:

(() => {
  var __webpack_modules__ = {……};
  var __webpack_module_cache__ = {};
  function __webpack_require__(moduleId) {……}
  var __webpack_exports__ = __webpack_require__("./src/index.js");
  exports.Index = __webpack_exports__;
})();

其他项目引用该库时的方式: CommonJs 引入
```
const {Index} = require('该库')
```

libraryTarget: "amd": 只能按照 amd 的规范引入库。将你的 library 暴露为 AMD 模块。AMD 模块要求入口 chunk（例如使用 <script> 标签加载的第一个脚本）通过特定的属性定义，例如 define 和 require，它们通常由 RequireJS 或任何兼容的模块加载器提供（例如 almond）。否则，直接加载生成的 AMD bundle 将导致报错，如 define is not defined。

index.js 入口文件如下:

module.exports = {
  name:"Index 库",
  say(){
    console.log('Index 库');
  }
}

webpack.config.js配置如下:

const Path = require("path");

module.exports = {
  entry: Path.resolve(__dirname, "src", "index.js"),
  output: {
    filename: "index.js",
    path: Path.resolve(__dirname, "build"),
    library: "Index",
    libraryTarget: "amd",
  },
  mode: "development",
};

生成的output如下:

define("Index", [], () => {
  return (() => {
    var __webpack_modules__ = {……};
    var __webpack_module_cache__ = {};
    function __webpack_require__(moduleId) {……}
    var __webpack_exports__ = __webpack_require__("./src/index.js");
    return __webpack_exports__;
  })();
});

其他项目引用该库时的方式:

libraryTarget: "umd": 可以用 script、commonjs、amd 引入库。将你的 library 暴露为所有的模块定义下都可运行的方式。它将在 CommonJS, AMD 环境下运行，或将模块导出到 global 下的变量。

index.js 入口文件如下:

module.exports = {
  name:"Index 库",
  say(){
    console.log('Index 库');
  }
}

webpack.config.js 配置如下:

const Path = require("path");

module.exports = {
  entry: Path.resolve(__dirname, "src", "index.js"),
  output: {
    filename: "index.js",
    path: Path.resolve(__dirname, "build"),
    library: "Index",
    libraryTarget: "umd",
  },
  mode: "development",
};

生成的output如下:

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === "object" && typeof module === "object")
    module.exports = factory();
  else if (typeof define === "function" && define.amd) define([], factory);
  else if (typeof exports === "object") exports["Index"] = factory();
  else root["Index"] = factory();
})(self, () => {
  return (() => {
    var __webpack_modules__ = {……};
    var __webpack_module_cache__ = {};
    function __webpack_require__(moduleId) {……}
    var __webpack_exports__ = __webpack_require__("./src/index.js");
    return __webpack_exports__;
  })();
});

其他项目引用该库时的方式:

开始​

单页面​

多页面​

分离 app(应用程序) 和 vendor(第三方库) 入口​

配置项​

output.publicPath​

output.library​

output.libraryExport​

output.libraryTarget​

开始

单页面

多页面

分离 app(应用程序) 和 vendor(第三方库) 入口

配置项

output.publicPath

output.library

output.libraryExport

output.libraryTarget