webpack 入口（entry）和输入管理（output）

Posted 2021-03-24 你看得到我？

在开始上代码之前，先让我们盘一盘什么是webpack中的入口和输入

入口

  假设你现在手里有一个水龙头，然后十个人用水管从你这里拿水。你这个龙头就是水的入口，水管就是你和这些人的依赖联系。现在供水局的要来查有多少个人在用你的水，只要顺这水管去查，就ok了。

webpack中的入口文件就是类似与这样的效果，是一个确定直接依赖和间接依赖文件，然后才好将他们统统打包，要不然你在某个地方使用的jquery，而又没有打包对应的依赖库，又怎么能使用呢

输入

webpack 把东西打包之后，放在那里，要不要分类。输出就是webpack放置东西的地方

号概念清楚了上代码

const path = require("path");//这个是node.js自带的路径模块 可以有效的防止不同机器上路劲出现差异问题

module.exports = {
    mode: ‘development‘,//配置
    //入口配置接收三种类型的参数，string array object,以下分别对每一种进行示范操作
    // entry: path.join(__dirname, ‘src/index.js‘),//使用string 单入口文件可以这样直接定义入口文件地址
    // entry: [//使用array
    //     ‘./src/index.js‘,//也可以直接使用相对地址，只要你能够确保最终的结果能够和你预期的一样就够了 不过使用这种方法创建的多入口，打包后只会输出一个main.js文件，
    //     // 为什么？两个原因 1没有配置output 指定输出的文件名 2即便配置了，但使用[]建立多入口的方式也会是webpack无法识别入口文件的标识，也就无法动态生成输入文件名，只能打包成一个main.js
    //     ‘./src/index2.js‘
    // ],
    // entry: {//使用对象 推荐使用这种方法去作为创建多入口的参数，
    //     index: path.join(__dirname, ‘src/index.js‘),//输入文件会默认自动根据这个对象的key值创建输出文件名 这个会创建一个app.js的输出文件
    //     index2:path.join(__dirname,‘src/index2.js‘),
    // },
    entry: () => {//使用方法 其实这个上述几种创建方式没有任何实质上的区别，只要在函数内返回对应的值即可，不过有一点好处就是，这个是动态的
        function join(src) {
            return path.join(__dirname, ‘src/‘ + src);
        }

        return {
            app: join(‘index.js‘),//可以少敲几个代码
            app2: join(‘index2.js‘),
        }
    },
    //还可以使用promise对象
    // entry: () => new Promise((success) => success({
    //     app: path.join(__dirname, ‘src/index.js‘),
    //     app2: path.join(__dirname, ‘src/index2.js‘),
    // })),
    output: {//输入文件配置
        path: __dirname + ‘/build‘,//指定输出文件 的地址
        // filename: ‘./js/index.js‘,//指定输入文件名 这个表示在输出目录build/js/index.js文件，如果存在多个入口就不能写死了否则webpack会提示两个输出文件拥有相同的名字错误，
        // 可以不指定或是由下面的方法,
        // 请注意 在入口文件使用的字符串或者数组作为参数，则输入的文件只会有一个
        // filename: "./js/[hash].js",//以入口文件的哈希值来命名
        filename:"./js/[name].js",//以入口文件的key值作为输入文件名 列入entry中是{app:"./src/index.js"} 那么对应的输出文件就是 app.js,这个只能是在entry参数为object时使用，其实还有更多别名的使用详情请去webpack官网查询
    }
}