webpack5 静态资源管理 devServer static使用和copy-webpack-plugin区别

介绍

静态资源是指在开发中有一些代码我们不希望被打包的一些资源，一般都是使用入口html引入的内容，是静态资源。

devServer static 主要是提供开发环境中的一个静态资源目录。

copy-webpack-plugin是webpack plugins 中的一个插件主要功能可以在打包过程中copy一些文件目录，比如我们要用到的一些静态资源上线之前都需要copy过去。

区别

devServer static和copy-webpack-plugin都可以实现静态资源的管理

但是在开发中copy-webpack-plugin会把我们的静态资源拷贝到内存中，导致我们开发效率热更新变慢
这个时候就需要使用devServer static管理开发环境的静态资源。

使用和原理

devServer：{
	//开发环境中设置静态资源目录默认public
	//static：true,//开启静态资源 false不使用静态资源
	static：{
	     //指定我们的public文件夹为静态资源目录
		 directory: path.join(__dirname, 'public'),
		 //指定我们要通过/public访问到directory设置的静态资源
		 //（这个很重要如果不设置默认是通过 / 访问directory设置的静态资源，会和默认访问index.html冲突）
		 publicPath: '/public',
	}
}

//大概原理devServer会在本地起一个web服务器通过localhost/public访问到本地服务器生成的api，
//public下面如果有index.html会直接打开，如果没有就生成一个index.html用于可视化访问静态资源。
//然后通过directory配置的路径递归的读出下面的文件返回给前端，供本地服务器访问资源。


//copy-webpack-plugin使用，一般用于打包上线的时候拷贝过去 功能和devServer static一样
plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: resolve(__dirname, './public'),
                    to: resolve(__dirname, './build/public')
                },
            ],
        }),
    ],