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: ['.*']
}
])