webpack 之 entry

Question

字符串

entry: './path/to/my/entry/file.js'
// 此时 output 的 name 为 main

数组

一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 "chunk" 中

entry: [
  './src/file_1.js',
  './src/file_2.js'
]

对象

entry: {
  main: './path/to/my/entry/file.js'
}
// 此时 output 的 name 为 main

entry: {
  app: './src/app.js',
  adminApp: './src/adminApp.js'
}
// 两个 chunk

多页面应用程序:三个独立分离的依赖图

entry: {
  pageOne: './src/pageOne/index.js',
  pageTwo: './src/pageTwo/index.js',
  pageThree: './src/pageThree/index.js'
}

为特定的入口指定一个自定义的输出文件名

entry: { 
  app: {
    import: './index.js',
    filename: 'pages/[name][ext]'
  }
  // 最终 dist/pages/app.js
},

dependOn

entry: { 
  // dependOn 选项你可以与另一个入口 chunk 共享模块
  // app 这个 chunk 就不会包含 react-vendors 拥有的模块了
  app: { import: './index.js', dependOn: 'react-vendors' },
  'react-vendors': ['react', 'react-dom', 'prop-types']
},
entry: {
  moment: { import: 'moment-mini', runtime: 'runtime' },
  reactvendors: { import: ['react', 'react-dom'], runtime: 'runtime' },
  testapp: {
    import: './wwwroot/component/TestApp.tsx',
    dependOn: ['reactvendors', 'moment'],
  },
},
 entry: {
  app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' },
  'react-vendors': ['react', 'react-dom', 'prop-types']
}