Webpack entry output 单入口与多入口

目录

• entry
  • 单入口
  • 多入口

 

entry

entry: 指定打包入口

理解依赖图

webpack是一个模块打包器
webpack把一切资源都当成模块
模块之间存在依赖关系

根据入口文件找到依赖，依赖之中又有依赖，所有依赖形成依赖树，将依赖文件加入依赖图
遍历完之后生成打包资源

单入口

entry的值是相对路径，总是相对于webpack.config.js去查找指定路径下的文件
webpack以entry中的文件作为打包入口，去查找依赖关系，从而构建应用

// 单入口
module.exports = {
    entry:'./src/index.js',
    output: {
        // 指定输出目录
        path: path.join(__dirname, 'dist'),
        // 指定打包之后的输出文件名称
        filename: 'indexjs'
    },
}

多入口

不管是单入口还是多入口，在output里面都只有一个output一个filename属性
可以用占位符保证文件名的唯一性
单入口可以用filename写死，但多入口必须通过占位符区分
多入口最终会生成多个打包文件

module.exports = {
  entry:{
    app:'./src/index.js',
    search:'./src/search.js'
  },
  output:{
    filename:'[name].js',
    path:__dirname+'/dist'
  }
}

以下将配置输出

dist/app.js
dist/search.js

两个入口输出两个文件，配合占位符'[finename].js'使用

'use strict';

const path = require('path');

module.exports = {
    // 入口 指定入口文件
    entry: {
        app:'./src/index.js', 
        search:'./src/search.js'
    },
    // 出口 
    output: {
        // 指定输出目录
        path: path.join(__dirname, 'dist'),
        // 指定输出文件名
        filename: '[name].js'
    },
    // 生成模式还是开发模式
    mode: 'production'
};