webpack配置的认识

常见配置

下面都是说现在在项目里面看到的

entry

常见写法

1. 字符串写法
   只有一个

   entry: {
    client: path.join(__dirname, '../entry-client.js')
     }
   
   输出
   client.js

2. 对象写法
   这种写法可以配多入口

   entry: {
    client: path.join(__dirname, '../entry-client.js'),
    clientA: path.join(__dirname, '../entry-client.js'),
     }
   
   输出
   client.js
   clientA.js

3. 数组写法
   这种写法不能重复使用同一个js，比如上面那样，还有，main名字会作为文件名

   entry: ['./main.js']
   
   输出
   main.js

4. 动态写法
   还能这样写的，当你npmrunbuild后，你会看到控制台等了5秒才开始构建，也就是说这个延时器是生效的

   entry: () => {
    return new Promise((res,rej) => {
      setTimeout(() => {
        console.log('5秒后构建')
        res({
          a:'./main.js',
          b:'./main.js',
        })
      },5000)
      
    })
     },

   key的值用法

   比如这个client，是对应output的时候，这里的值[name]变量

   output: {
    path: path.resolve(__dirname, '../dist'), //输出到哪个文件夹
    filename: '[name].js' //这个[name]
     },

   output

   这里对应entry配置的入口，如果对象写法有多个，到时候这里也会输出多个

   output: {
    path: path.resolve(__dirname, '../dist'), // 路径,输出
    filename: '[name].js', // 输出的js叫什么名字，对应entry的key
    library: '',
    libraryTarget: '' 
     },

   常见配置

   filename

   输出的文件名，通常都是

   [name.].js // 上面已经解释了

   这里[name]是这个内置变量还有其他
   [id]-Chunk 的唯一标识，从0开始
   [name]-Chunk 的名称
   [hash]-Chunk 的唯一标识的 Hash 值
   [chunkhash]-Chunk 内容的 Hash 值
   所以，这个filename你还能这样写

   filename: '[id]-[name]-[hash].js',

   path

   必须是 string 类型的绝对路径

   path: '/dabaohou'

   但是我发现这样写的话，不是输出到本项目下面，所以一般是下面这样写

   path: path.resolve(__dirname, 'dist_[hash]')

   注意这里有一个内置变量hash，还有path.resolve是返回一个拼接好的路径，path.join好像也行

publicPath

这里一般常见就上面两个，后面那两个讲之前我先引入一个点，
webpack一般打包的js，都是匿名的自执行函数

(() => {
  return {
    name: 'jack',
    age: 24,
  };
})();

没有赋值操作，所以你页面引入了这个js，也用不了，这个时候就是library,libraryTarget的作用
作用1