Concepts - Entry Points（官网）

官网链接：https://webpack.js.org/concepts/entry-points/

这一章节讲述了配置 entry 属性的方法

一、单个入口（简写）

Usage: entry: string | [string]

使用单个字符串

module.exports = {
  entry: './path/to/my/entry/file.js',
};

它其实是下面这种语法的缩写

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

使用字符串数组

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

二、多个入口

Usage: entry:{ <entryChunkName> string | [string] } | {}

module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

使用对象语法会更加冗余，但是它变得更加灵活
接下来看一看 EntryDescription object

• dependOn：entry point 的依赖，这些依赖必须在 entry point 加载之前先加载
• filename：指定每个输出文件的名字
• import：启动时需要加载的模块
• library：指定 library 选项，为当前 entry 构建一个 library
• runtime：runtime chunk 的名字
• publicPath：当 entry 输出的文件被浏览器引用时，为它们指定一个公共的 URL 地址，详情可见 output.publicPath

  module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
  };

三、常用场景

1. 分隔 App 和 Vendor Entries

webpack.config.js

module.exports = {
  entry: {
    main: './src/app.js',
    vendor: './src/vendor.js',
  },
};

webpack.prod.js

module.exports = {
  output: {
    filename: '[name].[contenthash].bundle.js',
  },
};

webpack.dev.js

module.exports = {
  output: {
    filename: '[name].bundle.js',
  },
};

上面的步骤做了什么？

• 我们告诉 Webpack 使用两个分开的入口

为什么这样做？

• 我们把不必在改动的库和文件（比如：Bootstrap,jQuery,images）放到 vendor.js 里，他们将会被捆绑在他们各自的块中
• 这些文件的 Content hash 依然相同，这样浏览器可以各自把他们缓存起来，减少加载时间

「@浪里淘沙的小法师」