工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图、开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片,而在打包时保留这些静态资源,直接打包到指定文件夹中。此时就需要使用到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
winsocket入门学习
理解音视频 PTS 和 DTS
理解音视频 PTS 和 DTS
FFMPEG学习----使用SDL构建音频播放器
FFmpeg被声明为已否决的解决方案
FFMPEG结构体分析:AVCodecParameters
FFMPEG学习----使用SDL播放PCM数据
如何提取CSDN博客正文内容
遍历CSDN博客
- 最新文章
-
好行业,好公司,好仓位,长期持有就是成功的投资吗?(发布于05-28 14:00)
如何理解和计算安全边际(发布于05-27 15:07)
如何理解和计算内在价值(发布于05-25 11:46)
定量(好价格)还是定性(好公司)?(发布于05-26 09:28)
投资者应该努力的正确方向(发布于05-25 09:26)
格雷厄姆:如果走错了路会离目标越来越远(发布于05-24 14:22)
leetcode -- Path Sum
leetcode -- Path Sum II
leetcode -- Length of Last Word
leetcode -- Palindrome Partitioning II