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
Webpack将静态资源拷贝并压缩至输出文件夹的更多相关文章
- node静态资源服务器的搭建----访问本地文件夹（搭建可访问静态文件的服务器）
我们的目标是实现一个可访问静态文件的服务器,即可以在浏览器访问文件夹和文件,通过点击来查看文件. 1.先创建一个文件夹anydoor,然后在该文件夹里npm init一个package.json文件, ...
- Webpack 常见静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin插件
Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...
- vue项目之webpack打包静态资源路径不准确
摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...
- ASP.NET MVC 静态资源打包和压缩问题小记
ASP.NET MVC 中有个 BundleConfig 用于静态资源的打包和压缩,我在使用的过程中遇到一些问题,现在做下总结,并给出具体的解决方案. 问题一:打包压缩后的 JavaScript 和 ...
- Nginx的静态资源缓存以及压缩
Nginx是一款轻量级的网页服务器.反向代理器以及电子邮件代理服务器.Nginx采用的是异步非阻塞的通信机制(epoll模型),支持更大的并发连接.所谓的epoll模型:当事件没有准备好时,就放入ep ...
- nginx静态资源缓存与压缩
一.静态资源缓存 参考文章 (1)apache设置max-age或expires 这里需要修改.htaccess文件. <IfModule mod_headers.c> <Files ...
- vue打包静态资源后显示空白及static文件路径报错
1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误 改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过scr ...
- spring-boot配置静态资源映射的坑：properties文件不能添加注释
如此博文所述,Spring Boot 对静态资源映射提供了默认配置 默认将 /** 所有访问映射到以下目录:classpath:/staticclasspath:/publicclasspath:/r ...
- 【转载】.NET压缩/解压文件/夹组件
转自:http://www.cnblogs.com/asxinyu/archive/2013/03/05/2943696.html 阅读目录 1.前言 2.关于压缩格式和算法的基础 3.几种常见的.N ...
随机推荐
- 【软工实践】团队Git现场编程实战
组长博客链接 博客链接 组员职责分工 队员 职责分工 恩泽 进行任务的划分与安排,调用API,负责餐饮商铺及商圈信息的获取 金海 解析API返回的json数据,提取有关信息 君曦 部分算法编写 季城 ...
- oralce 超过1亿条数据的数据库表清理实践
2018-08-18 16:58 无腿鸟 阅读(331) 评论(0) 编辑 收藏 问题:当一个表的数据量超过一亿条,要删除其中的5000w条,如何处理. 如果直接使用delete语句,会涉及到到大量的 ...
- HearthBuddy的class276以及class247
使用de4dot-cex反编译原版的hearthbuddy得到的 链接: https://pan.baidu.com/s/1hT79LpIjbyvODsjnkSe_5A 提取码: iemx class ...
- unity手机游戏应用程序调试控制台Lunar Mobile Console - PRO 1.5.5
unity手机游戏应用程序调试控制台Lunar Mobile Console - PRO 1.5.5 High-performance Unity iOS/Android console built ...
- MySql数据库转设计文档（mysql-font工具和sql语句导出）
一.工具导出 1.使用的是MySQL-Front工具,这个工具使用非常方便,尤其是导出数据的时候,几百万的数据一两分钟就导完了,推荐使用. MySQL-Front下载(只有3.93M):http:// ...
- Nfs固定端口 nfs 端口公网映射
- matplotlib显示黑白灰度图像颜色设置
对于黑白灰度图像(矩阵) 1. 默认使用伪彩色拉升 2 cmap参数为 binary,可能导致颜色反转 3. cmap = gray,same color as origin, that is, wh ...
- 1.0 Android基础入门教程
1.0 Android基础入门教程 分类 Android 基础入门教程 本教程于2015年7月开始撰写,耗时半年,总共148节,涵盖了Android基础入门的大部分知识,由于当时能力局限,虽已竭尽全力 ...
- Vue动态路由 Get传值
<template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 我是首页组件 <ul> < ...
- ByteBuffer使用实例
ByteBuffer作为JDK的字节流处理对象,这里举个小例子说明下用法,直接上代码: package com.wlf.netty.nettyserver; import org.junit.Asse ...