webpck4.x系列-output

说过了entry，

与之相对应的便是output

output出口

目录

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

output的配置项要比entry多

具体详细的配置，可以 参考

filename

打包输出的文件名，默认值为main.js

webpack.config.js

const path =require('path')
module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: "./index.js",
  output: {
    filename: "[name].js"
  }
};

[name],是占位符，入口名是什么，[name]就是什么

entry名称的缺省值是main，则name的值就是main

如果entry使用数组，名称被缺省，output自然也是main

当然以不使用占位符

output: {
    filename: "bundle.js"
  }

那么dist下就会生成bundle.js

filename的配置支持多种占位符

[hash]

[chunkhash]

[contenthash]

[id]

[name]

[query]

[function]

我们先看下这个三个hash的区别

hash

output: {
    filename: "bundle.[hash].js"
  }

hash是项目级别的，什么意思？

即每次修改任何一个文件，所有文件名的hash至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。所以对于没有改变的模块而言，这样做显然不恰当，因为缓存失效了。此时，chunkhash的用途随之而来。

chunkhash

output: {
    filename: "bundle.[chunkhash].js"
  }

只有被修改了的文件的文件，chunkhash值才会修改

contenthash

当使用ExtractTextWebpackPlugin这个插件时，

这个插件时用来分离css的，在使用时hash

和chunkhash不会起作用，此时要使用contenthash

hash（chunkhash，contenthash）的长度可以使用 [hash:16]（默认为20）来指定。或者，通过指定output.hashDigestLength 在全局配置长度。

[id]

id是唯一标示，不会重复，从0开始

[name]

name 是模块名称，是你自己起的，在配置路由懒加载的时候可以自己命名

[function]

function，做动态配置的时候会用到。

例如根据不同的环境会有不同的输出

const path =require('path')
function filenameFun(){
//....一些判断逻辑，不同的环境不同配置
  return "bundle.[hash:8].js"
}
module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: "./index.js",
  output: {
    filename: filenameFun
  }
};

[query]

模块的 query，例如，文件名 ? 后面的字符串

没用过，使用方法和场景，官网也没有做详细介绍

先打断一下

我们现在要对package.json,做一下修改

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:dev": "cross-env NODE_ENV=development webpack --config webpack.config.js --progress ",
    "build:prod": "cross-env NODE_ENV=production webpack --config webpack.config.js --progress "
  },

cross-env是用来兼容各个平台而使用的

以上配置是用来区分打包环境

现在继续filename

修改webpack.config.js

const path =require('path')
function filenameFun(){
  if( process.env.NODE_ENV === "development"){
    return "static/js/bundle.js"
  }else{
    return "static/js/bundle.[chunkhash].js"
  }

}
module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: "./index.js",
  output: {
    filename: filenameFun
  }
};

我们修改了filename的输出路径

"static/js/bundle.js"

删除dist，执行npm run build:dev

打包成功后，dist目录下会生成一个static目录，static目录下有个js文件夹，然后是bundle.js文件

filename支持指定路径输出

chunkFilename

此选项决定了非入口 chunk 文件的名称，

什么场景需要呢？

模块异步加载，路由懒加载，这样的文件是没有被列在entry中的

path

path是配置输出文件存放在本地的目录，字符串类型，是绝对路径

const path =require('path')

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, 'dist/static'),
    filename: "js/bundle.js"
  },
};

效果相同

publicPath

静态资源远程地址（CDN）

默认值是一个空串

在多数情况下，此选项的值都会以/结束。

总结

本文介绍了一些关于output的常用api

* filename，输出的文件名，支持多种占位符，支持配置路径

* 介绍了三种hash（hash，chunkhash，contenthash）的区别

* chunkFilename，非入口 chunk 文件的名称，配置懒加载和异步模块的文件名

* path，是配置输出文件存放在本地的目录，字符串类型，是绝对路径

* publicPath 静态资源的远程地址，在配置CDN时会用到