陌上寒

陌上寒个人博客

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时会用到

发表评论

电子邮件地址不会被公开。 必填项已用*标注