Webpack--资源输入输出

一、资源处理流程

（1）指定一个或多个入口（entry），也就是告诉webpack具体从源码目录下的哪个文件开始打包。

（2）存在依赖关系的模块会在打包时被封装为一个chunk（代码块，在webpack中可以被理解成被抽象和包装过后的一些模块）

（3）根据具体配置不同，一个工程打包时可能会产生一个或多个chunk。

（4）webpack会从入口文件开始检索，并将具有依赖关系的模块生成一颗依赖树，最终得到一个chunk。由整个chunk得到的打包产物我们一般称之为bundle。

（5）每一个入口都会产生一个结果资源。（entry和bundle存在着对应关系）（存在特殊情况）

（6）在webpack默认配置中，当一个bundle大于250KB时（压缩前）会认为这个bundle已经过大了，在打包时会发生警告。

二、配置资源入口

Webpack通过context和entry这两个配置项来共同决定入口文件的路径。在配置入口时，实际上做了两件事：

• 确定入口模块的位置。
• 定义chunk name。（一个入口，默认为“main”，多个入口，需要为每个入口定义chunk name作为该chunk的唯一标识）

  module.exports = {
    context:path.join(_dirname,'./src'),
    entry:'./scripts/index.js'
  }

 

• context 

context可以理解为资源入口的路径前缀，在配置时要求必须使用绝对路径的形式。 (只能为字符串)

• entry

（1）字符串类型

（2）数组类型入口

作用：将多个资源预先合并，在打包时webpack会将数组中最后一个元素作为实际的入口路径

module.exports = {
  entry: ['babel-polyfill', './src/index.js']
}
//等同于
module.exports = {
  entry: './src/index.js'
}
//index.js
import 'babel-polyfill'

（3）对象类型入口

定义多入口，必须使用对象的形式。对象的属性名（key）是chunk name，属性值（value）是入口路径（可以为字符串或数组）。

module.exports = {
  entry: {
    index: './src/index.js',
    lib:'./src/lib.js'

  }
}

 （4）函数类型入口

1、用函数类型定义入口时，只要返回上面介绍的任何配置形式即可。

2、优点：可以在函数体内添加一些动态的逻辑来获取工程的入口。

3、支持返回一个promise对象来进行异步操作。

module.exports = {
  entry: () => './src/index.js'
}

•  提取vendor

module.exports = {
  context: path.join(_dirname, './src'),
  entry: {
    app:'./src/app.js',
    vendor:['react','react-dom','react-router']
  }
}

 （1）vendor的意思是“供应商”，在webpack中vendor一般指的是工程所使用的库，框架等第三方集中打包而产生的bundle。

 （2）使用CommonsChunkPlugins（webpack4后为optimaization.splitChunks），将app与wendor这两个chunk中公共模块提取出来。

（3）由于vendor仅仅只包含第三方模块，这部分不会经常改动，因此可以有效地利用客户端缓存，在用户后续请求页面时会加快整体的渲染速度。

三、配置资源出口

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.join(_dirname, './assets'),
    publicPath: '/dist'
  }
}

• filename 

（1）作用：控制输出资源的文件名。其形式为字符串。

（2） 可以是一个相对路径，即便路径中的目录不存在也没关系，webpack会在输出资源时创建该目录。

（3）在多入口时，需要为对应产生的每个bundle指定不同的名字，webpack支持使用一种类似模板语言的形式动态地生成文件名。

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: ['react', 'react-dom', 'react-router']
  },
  output: {
    filename: '[name].js',
  }
}

a、【name】会被替换为chunk name。

b、其他集中模板变量

【hash】：指代webpack此次打包所有资源生成的hash

【chunkhash】：指代当前chunk内容的hash。

【id】：指代当前chunk的id

【query】：指代filename配置项中的query

作用：

（1）当有多个chunk存在时对不同的chunk进行区分。

（2） 控制客户端缓存。

module.exports = {
  output: {
    filename: '[name]@[chunkhash].js',
  }
}

• path

path可以指定资源输出的位置，要求值必须为绝对路径

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.join(_dirname, './dist'),
  }
}

• publicPath 

 （1）作用：指定资源的请求位置。

（2）请求位置：由JS或CSS所请求的间接资源路径。（页面中的资源分为两种，一种是由HTML页面直接请求的，比如通过script标签加载的JS，另一种是由JS或CSS请求的，如异步加载的JS，从CSS请求的图片字体等）

（3）有3中形式

1、HTML相关：将publicPath指定为HTML的相对路径，以当前页面HTML所在路径加上相对路径，构成实际请求的URL

2、Host相关：若publicPath以‘/’开始，则代表此时publicPath是以当前页面的host name为基础路径。

3、CDN相关：使用绝对路径。

//HTML:https://example.com/app/index.html
//https://example.com/app/0.chunk.js
publicPath: './js'
//https://example.com/0.chunk.js
publicPath: '/js'
//http://cdn.com/0.chunk.js
publicPath: 'http://cdn.com'