Webpack将静态资源拷贝并压缩至输出文件夹

就拿Vue项目来说，比如要将src/assets/js下的静态js文件，直接在public/index.html中引用：

这时候没有在项目中引用，不会经过wenpack的loader，也就不会自己打包到dist目录下。

可以通过配置vue.config.js来实现：

cmd:

npm install uglify-es --save-dev

vue.config.js:

const UglifyJS = require('uglify-es');
const CopyWebpackPlugin = require('copy-webpack-plugin');

function resolve (dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    ...
    configureWebpack: config => {

    config.plugins.push(
            new CopyWebpackPlugin([
                {
                    from: resolve('src/assets/js'),
                    to: 'js',
                    transform: function (content) {
                        return UglifyJS.minify(content.toString()).code;
                    }
                }
            ])
        );
    }
}

index.html:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    ...

    <script src="<%= BASE_URL %>js/mobile-response.js"></script>

  </head>
  ...
</html>

至此就算大功告成。

The end...Last updated by Jehorn, 5:17 PM, Wednesday, May 8, 2019

原文地址：https://www.cnblogs.com/jehorn/p/10833068.html

时间： 2024-10-29 19:11:06

Webpack将静态资源拷贝并压缩至输出文件夹的相关文章

【Java】利用文件输入输出流完成把一个文件夹内的所有文件拷贝的另一的文件夹的操作

一.基本目标 使用Java完成如下的操作: 把一个文件夹内的所有文件拷贝的另一的文件夹,例如,在F盘中有a与b两个文件夹: f:/a里面有一堆文件,运行Java程序之后就会全部复制到f:/b,并且完成重命名,在所有文件之前加rename_的前缀,如果里面有文件夹,则文件夹不重命名,里面的文件进行重命名,同样在所有文件之前加rename_的前缀: 二.制作过程 1.首先主函数非常简单,就是调用了上面FileTest类中的copyFolder函数 public class FileCopy { pu

定义不被SpringMVC拦截的静态资源（html, js, css等文件），通用方法，不需要每个目录都设置

springMVC的<mvc:resources mapping="***" location="***">标签是在spring3.0.4出现的,主要是用来定义对静态资源的访问. 上网搜了一下跟这个配置相关的文章,大多推荐用下面这种.可是,用这种的话,如果有一个新目录,就得新增一条配置,比较麻烦. <!-- For static resources --> <mvc:resources mapping="/image/**&q

跨平台的zip文件压缩处理，支持压缩解压文件夹

根据minizip改写的模块,需要zlib支持 输出的接口: 1 #define RG_ZIP_FILE_REPLACE 0 2 #define RG_ZIP_FILE_APPEND 1 3 4 //压缩文件夹目录,递归压缩 5 //szDir是需要压缩的目录,dstLevel是压缩的目录在压缩包里面的层次标识 6 //可直接指定"" 7 //szZipFile压缩包的文件名 8 //replaceFlag指定替换或者是追加进压缩包 9 int DoZipDir(const char*

webpack静态资源拷贝插件

处理不需要使用webpack统一打包处理或webpack不支持的文件 安装 npm install copy-webpack-plugin --save-dev 配置 const copyWebpackPlugin=require('copy-webpack-plugin'); module.exports={ plugins:[ new copyWebpackPlugin([ { from:__dirname+"/public/jquery.js", to:__dirname+&qu

gulp静态资源构建、压缩、版本号添加

公司移动端商城使用前后分离方案,前台nginx静态文件,js使用requirejs模式,使用gulp压缩添加版本号时发现问题, 问题1.在公共的js配置中,引用的路径是写死的,缓存会一直存在. 解决方案是添加 urlArgs 构建时用shell脚本替换 'ttversion'为一个随机数值,我用的是当前时间. 问题2.其他模块引用的是common,那common.js不变的话,缓存会一直存在. 解决方案:还是用shell脚本,首先更改common.js为common_随机数.js,再更改所有引用

python zlib 压缩 解压 文件夹

import os,os.path import zipfile def zip_dir(dirname,zipfilename): filelist = [] if os.path.isfile(dirname): filelist.append(dirname) else : for root, dirs, files in os.walk(dirname): for name in files: filelist.append(os.path.join(root, name)) zf =

linux tar压缩排除某个文件夹

一般直接用tar命令打包很简单,直接使用 tar -zcvf test.tar.gz test 即可. 在很多时候,我们要对某一个目录打包,而这个目录下有几十个子目录和子文件,我们需要在打包的时候排除其中1.2个目录或文件. 这时候我们在用tar命令打包的时候,增加参数 --exclude 就能达到目的. 例如: 我们以tomcat 为例,打包的时候我们要排除 tomcat/logs 目录,命令如下: tar -zcvf tomcat.tar.gz --exclude=tomcat/logs t

(22/24) webpack实战技巧：静态资源集中输出

工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图.开发文档),这些静态资源有可能是文档,也有可能是一些额外的图片,而在打包时保留这些静态资源,直接打包到指定文件夹中.此时就需要使用到copy-webpack-plugin这个插件了. copy-webpack-plugin:静态资源转移的插件. 1.copy-webpack-plugin的使用 1.1 静态资源 在src目录下,新建一个存放静态资源的文件夹public(假设里面有大量的静态资源(图片.文件等)) 1.

web站点优化之使用tengine搭建静态资源服务器和静态资源合并加载案例剖析

在一个项目还是单体架构的时候,所有的js,css,image都会在一个web网站上,看起来并没有什么问题,比如下面这样: 但是当web网站流量起来的时候,这个单体架构必须要进行横向扩展,而在原来的架构中静态资源这羊毛是出在单体架构这头羊身上,所以横向多少 个单体,就有多少个静态资源文件夹,比如下面这样的架构. 那这种架构有什么问题呢? 总的来说会有如下二个问题: 1.   浏览器对单一域名的请求有并发限制. 在同一个域名下,一般来说有js,css,img,media,html等等静态资源,如果资