• webpack 学习2 入口(entry)和输入管理(output)


    在开始上代码之前,先让我们盘一盘什么是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官网查询
        }
    }
  • 相关阅读:
    Linux命令之du命令
    6562. 【GDOI2020模拟4.15】楼房搭建(building)
    CF660E. Different Subsets For All Tuples
    6555. 【GDOI2020模拟4.11】黑红兔(brr)(SAM小技♂巧)
    6554. 【GDOI2020模拟4.11】赢家(winner)
    6553. 【GDOI2020模拟4.11】人生(life)
    6546. 【GDOI2020模拟4.8】USACO 2020 Open Contest, Platinum(circus)
    6545. 【GDOI2020模拟4.8】USACO 2020 Open Contest, Platinum(exercise)
    6544. 【USACO 2020 US Open Platinum】 Sprinklers 2: Return of the Alfalfa
    6543. 【GDOI2020模拟4.4】Easy Data Structure(动态dp)
  • 原文地址:https://www.cnblogs.com/wrhbk/p/11942954.html
Copyright © 2020-2023  润新知