webpack基础配置之入口（entry）

前言

webpack是前端开发者不可或缺的技能，熟悉掌握webpack的各种配置在实际开发项目中可达到事半功倍的效果，今天我们就来聊一聊webpack基础配置之入口（entry）。

在 webpack 配置中有多种方式定义 entry 属性。

• 用法1：传递字符串
  entry: string

  webpack.config.js
  
  module.export = {
      entry:'./src/main.js'，
      output:{
          path:path.resolve(__dirname,'../dist'),
          filename:'bundle.js'
      },
  }
  //直接将入口文件路径定义为main.js所在路径
  

• 用法2：传递数组
  entry: Array

  webpack.config.js
  
  module.export = {
      entry:['./src/main.js','./src/a.js']，
      output:{
          path:path.resolve(__dirname,'../dist'),
          filename:'bundle.js'
      },
      //将src目录下的main.js和a.js文件都打包到bundle.js中
  }
  

• 用法3：传递对象
  entry: Object

  webpack.config.js
  
  module.export = {
      entry:{
          'main':'./src/main.js',
          'a':'./src/a.js'
      }，
      output:{
          path:path.resolve(__dirname,'../dist'),
          filename:'[name]-[hash].js'//使用[name]确保每个文件名都不重复,每个打包之后的[hash]都一样，文件的hash为打包的hash
      }
  }