拷贝静态文件
这里的静态文件是指项目中未引用到的一些资源,比如一些图片、开发文档等。如果开发完成后,需要保留这些静态资源,要一起打包到项目中去,就需要拷贝静态文件,用到copy-webpack-plugin插件。
例如下图就是把public中的静态资源拷贝到build文件夹下:
具体步骤
1.安装插件
打开终端,进入到项目文件夹路径,输入命令cnpm install --save-dev copy-webpack-plugin
2.配置webpack.config.js文件
首先,引入插件:
const CopyWebpackPlugin = require('copy-webpack-plugin');
3.在module.exports = {}里的plugins里写配置:
new CopyWebpackPlugin({
patterns: [
{ from: __dirname+'/public/assets', to: __dirname+'/build/assets' },
],
}),
4.在终端输入npm run dev
进行打包。
!!!此处需要注意的是:
原来的版本,在module.exports = {}里的plugins里写配置为:
new CopyWebpackPlugin([
{
from:__dirname+'/public/assets',
to:__dirname+'/build/assets'
}
]),
如果在最近的版本中这样写就会报错,报错为:Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
如下图:
注:我的copy-webpack-plugin版本为:
所以,在安装webpack插件的时候,如果报错,需要检查一下是不是由于版本更新,而更新了使用插件的写法所导致的错误。可以去官网查一下插件的使用方法。
官网链接: https://webpack.js.org/plugins/copy-webpack-plugin/.