51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

webpack优化总结点

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:{
		
		
	}
赞(4)
未经允许不得转载:工具盒子 » webpack优化总结点