侧边栏壁纸
博主头像
小佑Blog| 小佑前端 | WEB前端博客 | WEB前端笔记 博主等级

未来属于那些相信梦想,并愿意为之付诸行动的人

  • 累计撰写 68 篇文章
  • 累计创建 91 个标签
  • 累计收到 67 条评论

目 录CONTENT

文章目录

webpack优化总结点

@小佑前端
2021-09-16 / 0 评论 / 0 点赞 / 1331 阅读 / 0 字 / 正在检测是否收录...

entarnels:外部扩展,我们把项目中的包,从打包的文件中单独分离出去。

externals:{
	'自定义属性名':'包生成的全局变量'
}

webpack.ProVidePlugin:这样的配置可以让我们在项目中不用在去每个地方都import导入一下。

webpack.providePlugin({
	"要在文件中使用的变量名":"安装包的名字"
})

resolve.extensions:在import引入的时候不用加后缀。

resolve:{
	extensions:['.js','.json','.xml']
}

resolve.alias:可以配置一个绝对路径,在引入资源文件中,引入的时候@就代表src的绝对路径

resolve{
	alias:{
	"@":path.resolve(_dirname,'../src')
	}
}

resolve.modules:当遇到写相对路径时,优先取src中查找,没有再去node_modules查找

resolve:{
modules:[path.resolve(__dirname,'./src/utils'),"node_modules"]
}

module.noParse:不依赖其他任何的包,提升一些构建速度。

module:{
	noParse:"jquery|lodash"
}

webpack.DefinePlugin:定义在编译阶段加上的一些全局变量

plugins:[
	new webpack.DefinePlugin({
	BASEURL:"true",
	BASEURL1:"false",
	})
]

webpack.IgnorePlugin:在打包时忽略

devtool:可以有助于调试

devtool:"soure-map" //eval-cheap-module-soure-map

thrad-loader:多进程打包;可以构建打包速度

webpack.IgnorePlugin:在打包时忽略指定文件

optimization.solitChunks:这是一个分包的位置

optimzation:{
	splitChunks:{
		chunks:"all",
		minisize:5000,// 代表值KB
		minChunks:1,
		cacheGroups:{
			jquery:{
			name:"",
			test:/jquery/
			chunks:'all'	
			 	}
			}
		}	
	},
	DllPlugin:{
		
		
	}
0

评论区