webpack4 打包模板配置

超、凢脫俗 2021-07-25 01:42 515阅读 0赞

命令打包:
    	方式一:
    		 webpack 起始文件 -o 输出文件 --mode=开发模式
    		 
    		 	-o为--output-path的简写
    		 	路径中的.为整个项目的根路径
    		 如:
    		 	webpack ./src/index.js -o ./build/build.js --mode=development
    		 	webpack ./src/index.js -o ./build/build.js --mode=production
    		 开发环境和生产环境会将es6模块编译成浏览器能识别的模块
    		 生产环境会压缩代码
    		 
    	方式二:
    		当配置了webpack.config.js后
    		执行webpack命令即可,webpack 默认执行webpack.config.js
    			可通过webpack --config 文件路径 指向指定的配置文件
    			
    其他命令:
    	webpack --json 文件名.json	将详细构建chunk信息输入到指定文件里
    	webpack --profile --json > stats.json	将详细构建chunk信息输入到指定文件里
    
    1、新建文件webpack.config.js
    	基于node.js的common.js语法
    
    2、使用
    	方式一:函数模式
    		module.exports=(env,argv)=>({
    			env:--env的参数,和mode无关
    			argv:所有--指定的参数
    				如:webpack --env=development --name=jeff
    			...
    		})
    	方式二:直接返回对象
    	module.exports={
    	文件上下文,绝对路径,用于从配置中解析入口点(entry point)和加载器(loader)。
    			context:'默认使用当前目录',
    		入口文件:
    			entry:'路径',
    			entry:['路径1','路径2'],
    				多入口,但也只会生成一个chunk,即一个文件
    			entry:{x:'路径1',xx:'路径2'}
    				多入口可以打包对应的js,而非在一个js里,生成键名对应的chunk
    					输出示例:
    						filename: 'src/js/[name].[contenthash:10].js',
    					    path:path.resolve(__dirname,'build')
    				
    		输出文件:(js文件指定路径,通过修改下面参数的路径即可)
    			output:{
    				filename:'输出文件名',
    				path:'输出路径',
    				publicPath:'路径前缀' 所有路径的公共路径前缀,如'/',则资源路径为'/xx',‘/’会去服务器根目录下查找,
    					也可以理解为虚拟路径,不会真正生成,将打包后的文件都放进去,所以引用时只需要引入相同虚拟文件路径下的文件即可
    					publicPath: 'https://cdn.example.com/assets/', // CDN（总是 HTTPS 协议）
    				    publicPath: '//cdn.example.com/assets/', // CDN（协议相同）
    				    publicPath: '/assets/', // 相对于服务(server-relative)
    				    publicPath: 'assets/', // 相对于 HTML 页面
    				    publicPath: '../assets/', // 相对于 HTML 页面
    				    publicPath: '', // 相对于 HTML 页面（目录相同）
    			  	chunkFilename:'[name]xx',   非入口文件生成的chunk,如果命名使用contenhash做缓存时,注意optimization添加runtimeChunk将hash抽取成一个文件
    			  		如:
    			  			(1)import('xx').then.catch分离的chunk 
    			  			(2)optimization将node_modules内的文件分离成单独chunk
    			  			
    			  	library:'[name]xx',  库暴露的名称,将打包的文件内容,通过指定的名称暴露出去,不指定时,打包后的文件内容在一个函数里,外部无法访问,var xx=(function(){...})()
    			  	libraryTarget:'window', 库的引入方式,默认为'var',library指定的变量添加到window下,即window['指定变量名']使用,浏览器平台使用或者不指定
    			  		'global', 	 global.指定变量名,node平台使用
    			  		'commonjs',  require('指定变量名')
    			  		'umd', 将你的 library 暴露为所有的模块定义下都可运行的方式。它将在CommonJS, AMD环境下运行
    			  		library和libraryTarget一般在dll时使用
    			  	libraryExport:'default',  导出库的哪个属性,_entry_return_表示webpack导出的行为
    					'default'  	入口的默认导出将分配给 library target,即使用时不需要XX.default即import xx from XX即可使用
    						var MyDefaultModule = _entry_return_.default;
    					'指定名称的模块'
    						var MyModule = _entry_return_.指定名称的模块;
    						本项目内通过library设置的字段直接使用,项目外require后直接使用即可
    			  		['模块1','模块2']		将会解析成路径
    			  			var MySubModule = _entry_return_.模块1.模块2;
    			},
    		模块处理
    		module:{
    			noParse:/正则/或者func(cont){return /正则/.test(cont)}/数组	防止webpack解析那些任何与给定正则表达式相匹配的文件。忽略的文件中 不应该含有 import, require, define 的调用，或任何其他导入机制。
    				如:/jquery/,jquery中无其他包的依赖项
    			rules:[	创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
    				{ 单个处理器
    					test:/\.要处理的文件后缀$/,
    						其他匹配方法:
    						include:/要处理的文件或文件夹/,：匹配特定条件。一般是提供一个字符串或者字符串数组，但这不是强制的。
    						  include: [
    						    path.resolve(__dirname, "app/styles"),
    						    path.resolve(__dirname, "vendor/styles")
    						  ]
    						exclude:/要处理的文件或文件夹/,排除特定条件。一般是提供一个字符串或字符串数组，但这不是强制的。
    						and:/\.要处理的文件后缀$/,必须匹配数组中的所有条件
    						or: /\.要处理的文件后缀$/,匹配数组中任何一个条件
    						not:/\.要处理的文件后缀$/,必须排除这个条件
    					enforce:'pre'  优先执行,'post'延后执行
    					loader:'处理loader',					
    					options:{
    						loader对应的添加属性,可去官网LOADERS处查看(https://www.webpackjs.com/loaders/)
    					},
    					sideEffects:true 表名模块包含副作用,不被tree shaking处理
    				},
    				{ 多个处理器
    					test:/\.要处理的文件后缀$/,
    					use:['处理loader',{loader:'处理loader',options:{}},...], 多个处理器
    				},
    				  处理器参数
    				{
    					loader:'file-loader',
    					options:{
    						name:'[path][name].[ext]'	照片导出名称,默认为hash值,会根据填写路径中的'/'自动生成对应文件夹等
    				          	[ext] 资源扩展名 
    				          	[name]	资源的原名称 
    				          	[path] 资源相对于context的路径,即文件所在的根文件夹起到文件所在的文件
    				          	[hash]	内容的哈希值,如:['hash:10'],提取hash前10位,更多配置如图hashes,<内容>可不写
    				          	[数字]	根据匹配结果索引选择上面的内容
    			            outputPath:'从build目录下开始的输出路径'  输出路径如果name也写了路径,可能会有冲突
    					}
    				},
    				{
    					oneOf:[{  只匹配其中一个loader
    						use:'xx'
    					},{use:'xx'}]
    				}
    			]
    		},
    		plugins:[ 插件,使用前需要下载后require('xx')导入
    			new 插件名(),
    		], 
    		resolve:{  设置模块如何被解析
    			alias:{ 路径别名,可以减少从node_modules查找的时间
    				xx:path.resolve(__dirname, 'src/css/')  xx即代表'xxx/src/css'路径,文件使用时 'xx/yy.css'代替相对路径
    				xx$:path.resolve(__dirname, 'path/to/file.js') 加上$表示精选匹配, 'xx'即代表file.js
    			},
    			extensions:[".js", ".json"],  自动解析确定的扩展,默认为js和json,从左往右查找
    			modules:["node_modules"], 解析模块即modlues中的loader时应该搜索的目录
    				modules: [path.resolve(__dirname, "node_modules"), "node_modules"],  提供路径可以更快查找,提供的目录优先于node_modules/搜索：
    			mainFields:['main'],	导入模块时,使用package.json的哪个字段导入模块,指定可减少分析时间
    				'main': 使用package.json中main字段代表的入口导入模块
    				['style','main'] 在导入时,会先去根据package.json的style字段表示的路径引入模块,再去'main'字段
    					如,导入import 'bootstrap'时,配置如上,会先引入bootstrap的.css样式文件,若查找不到样式,才会引入bootstrap的js文件
    			mainFiels:['index'],	当没有package.json时,指定导入模块入口文件的名称,默认为index.js
    			plugins:[ 使用的额外的解析插件列表
    				
    			],
    		},
    		使用的属性和resolve中的属性相同,仅用于解析webpack的loader包(包括自定义loader)。
    		resolveLoader:{	
    		    modules: ['node_modules'],
    		    extensions: ['.js', '.json'],  
    		    mainFields: ['loader', 'main'],
    		    plugins:[ ],...
    		},
    		mode:'development',  模式,或者production
    		服务器配置
    		devServer:{
    			contentBase: path.resolve(__dirname, 'build'),  提供内容的目录
    			contentBase:['xx','xx',...]
    		    compress: true,		启动gzip压缩
    		    host:'localhost',   域名,默认为'localhost'
    		    port: 3000, 	    监听端口号
    		    open:true, 			自动打开浏览器
    		    hot:true,			开启hmr
    		    watchContentBase: true,  监听contentBase指定的目录文件,发生变化就重载
    		    watchOptions:{ 监听设置
    		    	aggregateTimeout: 300,  当第一个文件更改,会在重新构建前增加延迟,将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位：
    		    	ignored:/node_modules/  忽略node_modules内文件,其他写法"files/**/*.js"
    		    },
    		    clientLogLevel:true,  忽略启动日志
    		    quiet:true, 	除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。
    		    overlay: true,  	报错不全屏提示
    		    proxy: { 代理服务器
    			  "/api": {
    			    target: "http://localhost:3000",
    			    pathRewrite: {"^/api" : ""},  路径重写,即路径中'/api'会被替换为空
    			    secure: false,  接受运行在 HTTPS 上，且使用了无效证书的后端服务器
    			  }
    			},
    			proxy: [{ 多代理服务器写法
    			  context: ["/auth", "/api"],
    			  target: "http://localhost:3000",
    			}],
    			status:''或{},  自定义构建输出提示信息,与quiet和noInfo搭配无效
    			
    		},
    		optimization: {  用于手动配置和覆盖优化
    			minimize:true,   告知webpack使用TerserPlugin或其它在optimization.minimizer定义的插件压缩 bundle。
    		    splitChunks: { 
    		      chunks:'all',  	  将第三方库单独打包成一个文件,
    		      	'async',异步引入的库进行分离
    		      	'initial',同步引入的库进行分离
    		      	'all',所有引入的库进行分离
    		      minSize:30*1024,  大于30kb才分割
    		      maxSize:0,  		最大无限制
    		      maxAsyncRequests:30,	按需加载时并行加载的最大数量
    		      maxInitialRequests:30,  入口js文件最大并行请求数量
    		      minChunks:1,  当提取的chunk文件被引用次数超过1次时才分割
    		      name:true,	运行使用自动命名规则
    		      automaticNameDelimiter:'~'   chunk的名称连接符号,如:vendors~main.js
    		      将打包的chunks进行分割,分割成几个chunk(文件)
    		      cacheGroups:{  可以继承和/或覆盖splitChunks的任何选项。但是test、priority和reuseExistingChunk只能在cache组级别上配置。要禁用任何默认缓存组，将它们设置为false。
    		      	xx:{ 表示node_modules会被打包到xx组的chunk中,即生成的chunk名称为:xx~yyy.js
    		      		test: /[\\/]node_modules[\\/]/, 匹配node_modules
    		      		priority:-10,  优先级
    		      		name:'重命名chunks,文件名默认为该对象的键名'
    		      	},
    		      	yy:{  其他被引用了2次及以上的模块使用该规则分割
    		      		priority:-20,
    		      		minChunks:2, 可以重写上面的配置
    		      		reuseExistingChunk:true,  当打包的模块和之前打包的模块是同一个,则复用	
    		      	}
    		      }
    		    },
    		    runtimeChunk:{ 将文件中引入的其他文件的hash值提取成一个文件格式如下,避免进行缓存时,因为文件的内改变使得hash值改变,导致引入该文件的文件内容也发生变化,进而导致重新打包
    		      name: entrypoint => `runtime~${entrypoint.name}`
    		    },
    		    minimizer:[ 配置生产环境的压缩方案(在plugins中的压缩方案也可以写在这里),默认使用TerserPlugin进行压缩,进行配置需要下载该库并引入
    		    	new TerserPlugin({  需要下载'terser-webpack-plugin'并引入,假设命名为TerserPlugin
    		    		cache: true, 开启缓存
    		    		parallel: true, 开启多进程打包
    		    		sourceMap: true,  启有sourceMap
    		    		
    		    	})
    		    ]
    		  },
    	    构建代码错误提示
    	    devtool:'source-map', 可能开启后压缩失效
    	    配置是否polyfill或mock某些Node.js全局变量。因为一些库会导入node的一些模块但是浏览器并不使用,通知webpack导入空
    	    watch:true,	监听文件修改,不需要手动输出文件,但需要手动刷新浏览器
    	    	或者命令启动 webpack --wach,
    	    	webpack --watch --progress, 使用--progress标志，来验证文件修改后，是否没有通知 webpack。如果进度显示保存，但没有输出文件，则可能是配置问题，而不是文件监视问题。
    	    watchOptions:{ 监听文件配置选项
    	    	aggregateTimeout: 200,	当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。
    		    poll: 1000,		每n毫秒检查一次变动
    		    ignored: ['files/**/*.js', 'node_modules/**']   采用glob匹配模式,除了数组还可写成单个字符串
    	    }
    	    status:''或{},  自定义构建输出提示信息
    	    node:{ 
    	    	dns:'empty'
    	    },
    	    这些选项可以控制webpack如何通知「资源(asset)和入口起点超过指定文件限制,false关掉提示
    	    performance:{
    	    }
    	}

代码示例:  
最基础(能打包js+生成html文件并引入打包的js):  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/df3d6e6c1825460fb94df907269d9156.png