Vue项目使用webpack打包时纯静态资源的处理

Vue项目的开发过程中集成一款地图插件，但地图版本较低，无法通过npm管理，在打包的时候需要把地图包copy到dist目录下，于是使用到了webpack插件CopyWebpackPlugin，

该插件可以在webpack中拷贝文件和文件夹

安装命令为

npm install --save-dev copy-webpack-plugin

创建CopyWebpackPlugin：

new CopyWebpackPlugin([patterns], options)

patterns参数如下:

参数	是否必填	作用	其他说明
from	Y	定义拷贝的源目录	from: ‘/Source’
to	N	定义拷贝的目标目录	to: ‘/absolute/[name].[ext]’ 不填的话会默认为output.path路径
toType	N	拷贝的类型	file or dir or template
force	N	强制覆盖先前的版本	默认false
context	N	上下文	from属性的相对路径，但开发过程中from属性常常使用__dirname，从而省略了context
flatten	N	只拷贝文件，不会把文件夹结构也拷贝过来	false
ignore	N	忽略拷贝指定的文件	可以用模糊匹配
transform	N	webpack执行拷贝之前对文件内容进行修改	function(content, path) { return content;}

option参数如下

参数	默认	作用
context	compiler.options.context	from属性的相对路径，适用于所有pattern
ignore	[]	忽略拷贝指定的文件
copyUnmodified	false	在webpack-dev-server构建的时，默认只拷贝修改过的文件，设置为true则拷贝所有
debug	'warning'	'warning' :告警信息 'info' / true :文件路径信息以及读取信息 'debug' :最详细的调试信息

在webpack.prod.conf.js文件中，webpackConfig变量中添加CopyWebpackPlugin插件：

// copy Map assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../Map'),
to: config.build.mapDirectory,
ignore: ['.*']
}
])