webpack4入门2——入口和出口配置

本文长期更新，如有错误，还请指正！
关注一下不迷路 =.=

entry（入口）

---

webpack将指定的js和及其依赖打包成一个文件，当然需要在config中配置js文件路径

语法：

entry:{
    name1:path1,
    name2:path2
}

• name 给当前文件加个名字（chunk Name），在输入的时候可以使用
• path 打包的js路径

1 . 单入口配置

entry:'path|array'

参数为array时，包含多个path，单入口只会生成一个文件

2 . 多入口配置

entry:{
    name1:path1,
    name2:[path2,path3] //数组时合成一个
}

多入口会生成多个文件

output（出口）

---

指定文件输出的位置

语法：

output:{
    filename:'[name].js',
    path:'绝对路径'
}

• filename为输出后的文件名称，name可以是动态的，等于entry中配置的name

  除了[name]还可以是 [hash]、[id]、[chunkhash]

• path必须是绝对路径，而且node计算时/并非是你的项目目录（盘根目录），实际路径计算方法如下：

//引入node的path模块
const path = require("path"); 
//配置文件所在的绝对路径
path:path.resolve(__dirname, './');

注：后面的 ./ 相对于当前文件所在路径计算的

场景示例

---

输出一个文件

//配置文件
const path = require("path");
module.exports={
    //模式:开发
    mode:"development",
    //入口
    entry:'./test1.js',
    //出口
    output:{
        path:path.resolve(__dirname, './'),
        filename:'merge.js'
    }
}

或者需要把多个文件打包成一个

const path = require("path");
module.exports={
    mode:"development",
    //入口（多）
    entry:['./test1.js','./test2.js','./test3.js'],
    output:{
        path:path.resolve(__dirname, './'),
        filename:'merge.js'
    }
}

输入多个文件

当你非单页面应用时，希望把entry中不同的js分别打包，以供不同的html引用

const path = require("path");
module.exports={
    mode:"development",
    //入口(多)
    entry:{
        merge1:'./test1.js',
        merge2:'./test2.js',
        merge3:'./test3.js',
    },
    //出口
    output:{
        path:path.resolve(__dirname, './'),
        filename:'[name].js'
    }
}

这样，三个入口文件就被分别打包了

image