webpack基础：entry和outputwebpack中entry可以是字符串，也可以是对象或者数组，分为单文件入口

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

# webpack基础概念简览

entry

webpack中entry可以是字符串，也可以是对象或者数组，分为单文件入口或者多文件入口

字符串（单文件入口, 1个chunk，1个bundle, chunk的name为main）

module.exports = {
    entry: "./src/index.js"
}

对象（多文件入口，多文件出口，n个key，n个chunk，n个bundle，chunk的name为key的name）

module.exports = {
    entry: {
        main: "./src/index.js",
        app: "./src/app.js"
    }
}

当是对象时，对象的属性可以是字符串，也可以是数组，那么还可以这样写，chunk的name依然为main, 给名为main的入口指定了多个文件

module.exports = {
  entry: { 
      main: ['./src/index.js', './src/app.js'] 
  },
}

还可以是一个函数，可以从服务端获取动态入口，但触发周期会不同

module.exports = {
//   entry: { main: ['./src/index.js', './src/app.js'] },
  entry: () => new Promise((resolve) => resolve(
      ['./src/index.js', './src/app.js'])
  )
}

数组（合并输出， 1个chunk，1个bundle，chunk的name为main）
webpack会把数组中每个元素指定的模块都加载进来

module.exports = {
    entry: ["./src/index.js", "./src/app.js"]
}

output

与入口相对应的是出口，出口即为输出，webpack中的output指定了entry中对应入口文件编译打包后输出的bundle
其中比较常用的有path和filename的属性
在基础概念的时候讲了不指定output，默认会输出到"dist/main.js"，也就是说，默认path为dist，默认filename为main.js

如果entry指定为单入口时，可以在output中指定输出bundle为bundle.js，当执行npx webpack时，打包后文件目录将是dist/bundle.js
如果不指定，将会判断是否指定key，指定了key将以key为优先级，未指定key，将默认为main.js
当entry指定为多入口时，可以指定filename为[name].js,这样打包出来将会有多个bundle，比如

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

这样配置，打包出来dist目录中将多出app.js和main.js

对于不同的entry可以通过占位符来区分，比如

const path = require('path');
module.exports = {
entry:{
    main:"./src/index.js",
    app:"./src/app.js"
},
  output: {
    filename: "[name]-[hash:8].js",
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production',
};

这时的dist将不再是app.js和main.js，而是变成了app-xxxxx.js和main-xxxxx.js

[hash] 是整个项目的hash值，每次编译都会生成新的hash值，每次修改文件也会导致所有文件的hash改变，其中hash 的长度可以为8或者20，默认为20