(22/24) webpack实战技巧:静态资源集中输出
2024-10-18 19:27:29
工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图、开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片,而在打包时保留这些静态资源,直接打包到指定文件夹中。此时就需要使用到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
最新文章
- 原生JS实战:写了个斗牛游戏,分享给大家一起玩!
- LVS持久连接
- eclispe---快捷键设置
- PLSQL在64位系统连接不上32位的服务器
- xming + putty 搭建远程图形化ssh访问ubuntu 14.04
- PHP 只有登陆后才能浏览的简单实现
- keil中编译时出现*** ERROR L107: ADDRESS SPACE OVERFLOW
- Hibernate输出SQL语句以便调试
- SQL入门学习0-数据库与SQL
- 单独一个img标签的居中显示
- 谈一谈JDK8的函数式编程 (一)
- git创建版本库以及使用
- MySQL创建视图和Union all的使用案例
- MySQL之CONCAT()的用法
- 聚宽获取财务数据+DataFrame写入txt
- java中的 java.util.concurrent.locks.ReentrantLock类的使用方式
- Vmware ESXi日志文件存放目录地址
- C++学习(十九)(C语言部分)之 指针3
- tomcat gzip
- Vue安装以及Vue项目创建以及Vue Devtools安装