Webpack学习笔记（2）

文章目录

1-9.入口和出口

出口
入口

1-9.入口和出口

在这里插入图片描述

前置知识（node中）：
./:

模块化代码中，比如require("./")，表示当前js文件所在的目录
在路径处理中，"./"表示node运行目录

__dirname:
所有情况下，都表示当前运行的js文件所在的目录，它是一个绝对路径；

node内置模块 - path:

官方文档：https://nodejs.org/dist/latest-v12.x/docs/api/path.html

中文文档：http://nodejs.cn/api/path.html

path.resolve()方法将路径或路径片段的序列解析为绝对路径。


//该对象提供了大量路径处理的函数
var path = require("path") //导出了一个对象

// var result = path.resolve("./", "child", "abc", "123");
var result = path.resolve(__dirname, "src");
console.log(result); // 返回一个绝对路径，当前js文件所在目录下的src目录;  .......\src

出口

这里的出口是针对资源列表的文件名或路径的配置

出口通过output进行配置，配置参数常用的有path和filename

var path = require("path");  // 引入node中的path模块

module.exports = {
    mode: "production",   // 生产环境
    output: {
       //必须配置一个绝对路径，表示资源放置的文件夹，默认是dist
        path: path.resolve(__dirname, "target"), //从当前文件所在的目录放置到“target”文件夹下
        
        //配置的合并的js文件名的规则（文件名，默认是main.js）
        filename: "bundle.js"          // 静态的写法（一般不推荐使用）
        filename: "scripts/bundle.js"  // 同上, 放置到tagget文件夹下的scripts文件夹下bundle.js;
        
        filename: "[id].[chunkhash:5].js"  // 动态配置，下面有说明
    }
}

入口

入口真正配置的是chunk

入口通过entry进行配置

var path = require("path")

module.exports = {
    mode: "production",
    
    entry: {
    	//默认配置;   属性名：chunk的名称， 属性值：入口模块（启动模块）
        main: "./src/index.js", 
        // 配置一个a模块  chunk名称是a , 入口模块是 ./src/a.js
        a : "./src/a.js" 
    },
    output: {
        path: path.resolve(__dirname, "target"), 
        filename: "[name].js"  // [规则下面有说明] 
    },  
}
// 在target文件夹下输出两个js文件, main.js 和 a.js

var path = require("path")

module.exports = {
    mode: "production",
    entry: {
    	//默认配置;   属性名：chunk的名称， 属性值：入口模块（启动模块）
        main: "./src/index.js", 
        a: "./src/a.js"
    },
    output: {
        path: path.resolve(__dirname, "target"), 
        filename: "[name].[hash:5].js"   // [规则下面有说明]  :5 表示hash值取前五位
    },
}
// 在target文件夹下输出两个js文件, main.xxxxx.js 和 a.xxxxx.js
// hash值会随内容变化而变化,通常用于处理缓存问题，

var path = require("path")

module.exports = {
    mode: "production",
    entry: {
    	//默认配置;   属性名：chunk的名称， 属性值：入口模块（启动模块）
        main: "./src/index.js", 
        a: ["./src/a.js", "./src/index.js"] //启动模块有两个
    },
    output: {
        path: path.resolve(__dirname, "target"), 
        filename: "[name].[chunkhash:5].js"   // [规则下面有说明] 
    },
}
// 在target文件夹下输出两个js文件, main.xxxxx.js 和 a.xxxxx.js
// hash值会随内容变化而变化,通常用于处理缓存问题，

规则：

name：chunkname ，相当于一个占位符
hash: 总的资源hash，通常用于解决缓存问题， 根据的是文件内容生成出来的，文件内容只要发生变化，（文件名）hash就会变化(一变全都变)，这样浏览器就会重新请求，而不是读取缓存。可以通过在hash后书写：number控制hash值的位数，例如：[hash:5]；
chunkhash: 使用的是每一个chunk的hash，而不是使用总的资源hash，
好处：当发生变化时，只会改变发生变化的的hash，而不是全部变化；
id: 使用chunkid，不推荐

未完待续。。。。

来源：CSDN

作者：前进知者

链接：https://blog.csdn.net/weixin_44062476/article/details/104748485

标签

webpack中文文档

Webpack

绝对路径