【webpack核心】- 8、入口 和 出口

最终代码：

var path = require("path")

module.exports = {
    mode: "production",
    entry: {
        main: "./src/index.js", //属性名：chunk的名称， 属性值：入口模块（启动模块）
        a: ["./src/a.js", "./src/index.js"] //启动模块有两个
    },
    output: {
        path: path.resolve(__dirname, "target"), //必须配置一个绝对路径，表示资源放置的文件夹，默认是dist
        filename: "[name].[chunkhash:5].js" //配置的合并的js文件的规则
    },
    devtool: "source-map"
}

1、node环境下的./ 和 _dirname

node环境下的./的含义，分2种情况：

1. 模块化代码中，比如require("./")，表示当前js文件所在的目录
2. 在路径处理中，"./"表示node运行的目录

__dirname: 所有情况下，都表示当前运行的js文件所在的目录，它是一个绝对路径
   

2、node里的path模块

node内置模块 - path: https://nodejs.org/dist/latest-v12.x/docs/api/path.html

var path = require("path") 导出了一个对象,该对象提供了大量路径处理的函数
path.resolve()该函数可以把一些列的路径/路径片段组装成绝对路径

var path = require("path");
var result1 = path.resolve("./", "child", "abc", "123");

var result2 = path.resolve(__dirname, "src");
console.log(result1);
console.log(result2);

如上图：
./表示node运行的目录
__dirname表示当前运行的js文件所在的目录

3、出口

这里的出口是针对资源列表的文件名或路径的配置
出口通过output进行配置,output 是一个对象,常用的配置是filename 和 path：

path – 修改打包的资源 存放的文件夹

• path – 路径，必须配置一个绝对路径，表示资源放置的文件夹，打包的资源放到哪个文件夹，默认是 绝对路径的dist

output: {
    path: path.resolve(__dirname, "target"), //必须配置一个绝对路径，表示资源放置的文件夹，默认是dist
},

path:"d:\\webpack\\xx\xx\\dist"这样手写的绝对路径不好：
1，不同的操作系统斜杠的写法不同；
2，工程移动的时候，要修改路径，路径写死了修改麻烦
推荐使用：
因为webpack.config.js是在node环境里运行的，所以可以使用node的path模块 path.resolvr(__dirname,"target")来产生一个绝对路径，__dirname 是当前运行的js文件所在的绝对路径– 和src同级的target目录

filename – 修改打包文件的文件名

• filename:配置的是资源的文件名

1. 资源是chunk产出的，chunk是模块合并的结果，资源列表中一定有一个是 合并模块后的js代码文件，还可能有对应的.map文件；filename配置的是合并模块后的js代码文件的文件名的规则；
2. 多个chunk 会产生多个资源列表， 但output只配置一个字符串–这个字符串是一种规则，可以是静态配置，也可以是动态配置

静态配置filename

output: {
	path: path.resolve(__dirname, "target"),//这样打包文件会被打包到target文件夹里，没有写但话打包到dist文件夹里
    //filename配置的合并的js文件的规则
    filename: "bundle.js",  //静态配置--会在target下生成bundle.js文件
    filename: "abc/efg/bundle.js",  //想把js放到target下abc下efg文件夹下
},

动态配置filename

filename:"[name].js",
filename:"[name]-123.js",   //搭配一些占位符适用
filename:"[name]-[hash].js",   //hash: 总的资源hash，通常用于`解决缓存问题`
filename:"[name]-[chunkhash:5].js",   //hash:5  取hash值的前5位

• name：chunkname
• hash: 总的资源hash，通常用于解决缓存问题
• chunkhash: 使用chunkhash - 当一个js内容变了,只有对应当文件名改变
• id: 使用chunkid，不推荐–因为开发环境是chunkname，生成环境是从0 开始当数字，开发 和 生产不一致，不推荐

4、入口

入口真正配置的是chunk

• 入口通过entry进行配置，其实配置到应该也是一个对象，里面配置的是chunk {chunk的名称:入口模块}
entry:'./src/index.js' 会默认转成entry:{main:"./src/index.js"}

多入口配置 + 出口动态配置

• 多个chunk就会有多个入口，如下，两个chunk会根据相应的入口文件找到相应的模块，各自合并打包出一个js
  
• 如上的写法，会报错：对应conflict--冲突：多个chunk生成的资源到一个相同到文件名
  
  **多个入口chunk ，就不能静态配置出口文件名了，我们应该动态配置一个规则，可以适用多个chunk;**规则如下：在合适到位置加一个[动态数据]
  动态配置出口文件名：

filename:"[name].js",
filename:"[name]-123.js",   //搭配一些占位符适用
filename:"[name]-[hash].js",   //hash: 总的资源hash，通常用于`解决缓存问题`
filename:"[name]-[hash:5].js",   //hash:5  取hash值的前5位

浏览器请求完文件后会缓冲起来，下次适用到时候就用缓冲，但当js文件改变后，我们希望重新下载文件–>所以我们希望文件内容改变后，文件名也改变——>这样当浏览器缓冲里找不到了，就会重新加载
关于hash：让文件名根据文件内容做改变，适用hash–hash就是根据文件内容生成出来当
使用总hash的话，一个文件内容变了，所有文件的名字都会改变，因为后面的hash变了，推荐适用chunkhash
chunkhash – 当一个js内容变了，只有这个js对应当chunkhash改变了，所以只有对应当文件名改变，浏览器就只用重新加载改变当文件了

• name：chunkname
• hash: 总的资源hash，通常用于解决缓存问题
• chunkhash: 使用chunkhash - 当一个js内容变了,只有对应当文件名改变
• id: 使用chunkid，不推荐–因为开发环境是chunkname，生成环境是从0 开始当数字，开发 和 生产不一致，不推荐

入口：配置一个chunk下有多个入口模块

入口配置：一个chunk下有多个入口模块

entry: {
    main: "./src/index.js", //属性名：chunk的名称， 属性值：入口模块（启动模块）
    a: ["./src/a.js", "./src/index.js"] //启动模块有两个
},

a: ["./src/a.js", "./src/index.js"] 这样，一个chunk里有两个启动模块，比如两个没有互相引用当模块，最后合并出来当资源还是只有一个，打包出来当结果代码里，按照顺序运行两个入口模块