webpack 入口(entry)和输入管理(output)

Posted 你看得到我?

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack 入口(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官网查询
    }
}

 

以上是关于webpack 入口(entry)和输入管理(output)的主要内容,如果未能解决你的问题,请参考以下文章

webpack核心四要素总结

webpack——entry,output/

webpack.config.js====entry入口文件的配置

Webpack框架知识整理——Entry Points,Output

webpack 入门入口(entry)出口(output

webpack配置(入口出口)