文章目录
最终代码:
var path = require("path")
module.exports = {
mode: "production",
entry: {
main: "./src/index.js", //属性名:chunk的名称, 属性值:入口模块(启动模块)
a: ["./src/a.js", "./src/index.js"] //启动模块有两个
},
output: {
path: path.resolve(__dirname, "target"), //必须配置一个绝对路径,表示资源放置的文件夹,默认是dist
filename: "[name].[chunkhash:5].js" //配置的合并的js文件的规则
},
devtool: "source-map"
}
1、node环境下的./ 和 _dirname
node环境下的./
的含义,分2种情况:
模块化代码
中,比如require("./"),表示当前js文件所在的目录
- 在
路径处理中
,"./"表示node运行的目录
__dirname
: 所有情况下,都表示当前运行的js文件所在的目录
,它是一个绝对路径
2、node里的path模块
node内置模块 - path: https://nodejs.org/dist/latest-v12.x/docs/api/path.html
var path = require("path")
导出了一个对象,该对象提供了大量路径处理的函数
path.resolve()该函数可以把一些列的路径/路径片段组装成绝对路径
var path = require("path");
var result1 = path.resolve("./", "child", "abc", "123");
var result2 = path.resolve(__dirname, "src");
console.log(result1);
console.log(result2);
如上图:
./
表示node运行的目录
__dirname
表示当前运行的js文件所在的目录
3、出口
这里的出口是针对资源列表的文件名或路径
的配置
出口通过output
进行配置,output 是一个对象,常用的配置是filename 和 path
:
path – 修改打包的资源 存放的文件夹
- path – 路径,必须配置一个绝对路径,表示资源放置的文件夹,
打包的资源放到哪个文件夹
,默认是 绝对路径的dist
output: {
path: path.resolve(__dirname, "target"), //必须配置一个绝对路径,表示资源放置的文件夹,默认是dist
},
path:"d:\\webpack\\xx\xx\\dist"
这样手写的绝对路径不好:
1,不同的操作系统斜杠的写法不同;
2,工程移动的时候,要修改路径,路径写死了修改麻烦
推荐使用:
因为webpack.config.js是在node环境里运行
的,所以可以使用node的path模块path.resolvr(__dirname,"target")
来产生一个绝对路径,__dirname 是当前运行的js文件所在的绝对路径
– 和src同级的target目录
filename – 修改打包文件的文件名
- filename:配置的是资源的文件名
- 资源是chunk产出的,chunk是模块合并的结果,资源列表中一定有一个是 合并模块后的js代码文件,还可能有对应的.map文件;filename配置的是
合并模块后的js代码文件
的文件名的规则
; 多个chunk 会产生多个资源列表
, 但output只配置一个字符串–这个字符串是一种规则,可以是静态配置,也可以是动态配置
静态配置filename
output: {
path: path.resolve(__dirname, "target"),//这样打包文件会被打包到target文件夹里,没有写但话打包到dist文件夹里
//filename配置的合并的js文件的规则
filename: "bundle.js", //静态配置--会在target下生成bundle.js文件
filename: "abc/efg/bundle.js", //想把js放到target下abc下efg文件夹下
},
动态配置filename
filename:"[name].js",
filename:"[name]-123.js", //搭配一些占位符适用
filename:"[name]-[hash].js", //hash: 总的资源hash,通常用于`解决缓存问题`
filename:"[name]-[chunkhash:5].js", //hash:5 取hash值的前5位
- name:chunkname
- hash: 总的资源hash,通常用于
解决缓存问题
- chunkhash: 使用chunkhash - 当一个js内容变了,只有对应当文件名改变
- id: 使用chunkid,不推荐–因为开发环境是chunkname,生成环境是从0 开始当数字,开发 和 生产不一致,不推荐
4、入口
入口真正配置的是chunk
- 入口通过entry进行配置,其实配置到应该也是一个对象,里面配置的是chunk
{chunk的名称:入口模块}
entry:'./src/index.js'
会默认转成entry:{main:"./src/index.js"}
多入口配置 + 出口动态配置
- 多个chunk就会有多个入口,如下,两个chunk会根据相应的入口文件找到相应的模块,
各自
合并打包出一个js
- 如上的写法,会报错:对应
conflict--冲突:多个chunk生成的资源到一个相同到文件名
**多个入口chunk ,就不能静态配置出口文件名了,我们应该动态配置一个规则,可以适用多个chunk
;**规则如下:在合适到位置加一个[动态数据]
动态配置出口文件名:
filename:"[name].js",
filename:"[name]-123.js", //搭配一些占位符适用
filename:"[name]-[hash].js", //hash: 总的资源hash,通常用于`解决缓存问题`
filename:"[name]-[hash:5].js", //hash:5 取hash值的前5位
浏览器请求完文件后会缓冲起来,下次适用到时候就用缓冲,但当js文件改变后,我们希望重新下载文件–>所以我们
希望文件内容改变后,文件名也改变
——>这样当浏览器缓冲里找不到了,就会重新加载
关于hash:让文件名根据文件内容做改变
,适用hash–hash就是根据文件内容生成出来当
使用总hash
的话,一个文件内容变
了,所有文件的名字都会改变
,因为后面的hash变了,推荐适用chunkhash
chunkhash
– 当一个js内容变了
,只有这个js对应当chunkhash改变
了,所以只有对应当文件名改变,浏览器就只用重新加载改变当文件
了
- name:chunkname
- hash: 总的资源hash,通常用于
解决缓存问题
- chunkhash: 使用chunkhash - 当一个js内容变了,只有对应当文件名改变
- id: 使用chunkid,不推荐–因为开发环境是chunkname,生成环境是从0 开始当数字,开发 和 生产不一致,不推荐
入口:配置一个chunk下有多个入口模块
入口配置:一个chunk下有多个入口模块
entry: {
main: "./src/index.js", //属性名:chunk的名称, 属性值:入口模块(启动模块)
a: ["./src/a.js", "./src/index.js"] //启动模块有两个
},
a: ["./src/a.js", "./src/index.js"]
这样,一个chunk里有两个启动模块,比如两个没有互相引用当模块,最后合并出来当资源还是只有一个,打包出来当结果代码里,按照顺序运行两个入口模块