Webpack学习笔记（2）—入口（entry）

webpack.config.js

单个入口写法

用法：entry: string | Array <file path>

const config = {
  entry: './path/to/my/entry/file.js' // 入口路径
};

// 或

const config = {
  entry: {
    main: './path/to/my/entry/file.js' // 入口路径
  }
};

// 当传入数组时
// 向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”
const config = {
  entry: {
    main: ['./path/to/my/entry/file1.js', './path/to/my/entry/file2.js']
  }
};

以上配置非常适合只有一个入口的应用

对象与法与多页面应用

用法：entry: {[entryChunkName: string]: string|Array<string>}

// 分离 应用程序【app】和 第三方库【vendor】入口
// 此设置允许你使用 CommonsChunkPlugin 从「应用程序 bundle」中提取 vendor 引用(vendor reference) 到 vendor bundle，并把引用 vendor 的部分替换为 __webpack_require__() 调用。
// 个人理解就是使用CommonsChunkPlugin从应用程序bundle中抽取公共引用到vendor bundle
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

// 多页面应用程序
const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};