工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图、开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片,而在打包时保留这些静态资源,直接打包到指定文件夹中。此时就需要使用到copy-webpack-plugin这个插件了。
copy-webpack-plugin:静态资源转移的插件。
1.copy-webpack-plugin的使用
1.1 静态资源
在src目录下,新建一个存放静态资源的文件夹public(假设里面有大量的静态资源(图片、文件等))
1.2 插件安装
使用npm安装(或者cnpm安装)
cnpm install --save-dev copy-webpack-plugin
--save-dev:表示此插件只在开发阶段使用。
1.3 引入插件
安装好后,需要在webpack.config.js文件的头部引入这个插件才可以使用。
const copyWebpackPlugin= require("copy-webpack-plugin");
1.4 配置插件
插件引入之后,我们需要在webpack.config.js文件中的plugins属性里边进行配置插件,相关配置代码如下:
new copyWebpackPlugin([{
from:__dirname+'/src/public',//静态资源路径
to:'public'//跟随output目录存放在public目录下
}])
-
from:要打包的静态资源目录地址,这里的__dirname是指项目目录下,是node的一种语法,可以直接定位到本机的项目目录中。(__dirname变量获取当前模块文件所在目录的完整绝对路径)
-
to:要打包到的文件夹路径,跟随webpack.config.js文件中output属性中配置的目录(dist目录)。所以不需要再自己加__dirname。
1.5 打包
配置好后,在终端进行打包,此时在打包出的dist目录中多了一个public目录,其下面的静态资源与src目录的public静态资源一样。
打包命令:
npm run dev
【推广】
免费学中医,健康全家人
原文地址:https://www.cnblogs.com/twodog/p/12135413.html
- 推荐文章
- 【转载】CString、BSTR和LPCTSTR之间的区别
- C++中各个后缀名文件的作用
- 字符类问题汇总
- 网易云课堂_C++程序设计入门(上)_第4单元:物以类聚 – 对象和类_第4单元作业【3】- 在线编程(难度:难)
- 网易云课堂_C++程序设计入门(上)_第4单元:物以类聚 – 对象和类_第4单元作业【2】- 在线编程(难度:中)
- 网易云课堂_C++程序设计入门(上)_第4单元:物以类聚 – 对象和类_第4单元作业【1】
- 网易云课堂_C++程序设计入门(上)_第4单元:物以类聚 – 对象和类
- 网易云课堂_C++程序设计入门(上)_第3单元:更上一层楼 – 超越C的语法_第3单元作业【3】-在线编程(难度:中;10分)
- 网易云课堂_C++程序设计入门(上)_第3单元:更上一层楼 – 超越C的语法_第3单元作业【2】-在线编程(难度:易;10分)
- 网易云课堂_C++程序设计入门(上)_第3单元:更上一层楼 – 超越C的语法_第3单元作业【1】-在线编程(难度:极易;5分)
- 网易云课堂_C++程序设计入门(上)_第3单元:更上一层楼 – 超越C的语法
- 网易云课堂_C++程序设计入门(上)_第2单元:丹青画松石– EGE图形库
- 7.4选择排序
- git入门
- ip addr详解
- 信息、熵、信息增益
- 数仓整体架构
- shred命令
- rm命令
- hive中groupby和distinct区别以及性能比较
- Hive 窗口函数LEAD LAG FIRST_VALUE LAST_VALUE
- xargs命令
- left semi join VS left join
- 静态类静态属性静态方法
- DATASET()用法
- 更改数据,ExecuteNonQuery()
- SqlDataReader
- 数据适配器
- 数据库连接-引用配置文件
- sql获取当前时间