就拿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将静态资源拷贝并压缩至输出文件夹的更多相关文章

  1. node静态资源服务器的搭建----访问本地文件夹（搭建可访问静态文件的服务器）

    我们的目标是实现一个可访问静态文件的服务器,即可以在浏览器访问文件夹和文件,通过点击来查看文件. 1.先创建一个文件夹anydoor,然后在该文件夹里npm init一个package.json文件, ...

  2. Webpack 常见静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin插件

    Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二: ...

  3. vue项目之webpack打包静态资源路径不准确

    摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...

  4. ASP.NET MVC 静态资源打包和压缩问题小记

    ASP.NET MVC 中有个 BundleConfig 用于静态资源的打包和压缩,我在使用的过程中遇到一些问题,现在做下总结,并给出具体的解决方案. 问题一:打包压缩后的 JavaScript 和 ...

  5. Nginx的静态资源缓存以及压缩

    Nginx是一款轻量级的网页服务器.反向代理器以及电子邮件代理服务器.Nginx采用的是异步非阻塞的通信机制(epoll模型),支持更大的并发连接.所谓的epoll模型:当事件没有准备好时,就放入ep ...

  6. nginx静态资源缓存与压缩

    一.静态资源缓存 参考文章 (1)apache设置max-age或expires 这里需要修改.htaccess文件. <IfModule mod_headers.c> <Files ...

  7. vue打包静态资源后显示空白及static文件路径报错

    1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误 改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过scr ...

  8. spring-boot配置静态资源映射的坑：properties文件不能添加注释

    如此博文所述,Spring Boot 对静态资源映射提供了默认配置 默认将 /** 所有访问映射到以下目录:classpath:/staticclasspath:/publicclasspath:/r ...

  9. 【转载】.NET压缩/解压文件/夹组件

    转自:http://www.cnblogs.com/asxinyu/archive/2013/03/05/2943696.html 阅读目录 1.前言 2.关于压缩格式和算法的基础 3.几种常见的.N ...

随机推荐

  1. [spring-boot] 配置随机端口

    第一种: server.port=0 第二种: //自定义一个范围 server.port=${random.int[1024,9999]}

  2. CMU Advanced DB System - Query Optimizer

    Overview Optimizer模块所处在的位置如图, 那么做optimize的目的是, 找出所有‘correct’执行计划中‘cost’最低的 那么这里首先要明确的概念,‘correct’,关系 ...

  3. IDEA一些自动补全方式

    第一种:系统自带:可以CTRL + j 可以查看 psvm 也就是public static void main的首字母. 依次还有在方法体内键入for会有一个fori的提示,选中然后tab键,就会自 ...

  4. Android Studio: 查看SDK源代码

    有时候在AS里点击某个类跳转到的仍然是这个类反编译的源代码,看起来依然不舒服,今天分享个办法: 1. 查看当前编译的SDK Version: 2. 确保当前版本的SDK源码已下载: 3. 找到andr ...

  5. iptables 4张表 5条链

  6. ISO/IEC 9899:2011 条款6.7.7——类型名

    6.7.7 类型名 语法 1.type-name: specifier-qualifier-list    abstract-declaratoropt abstract-declarator: po ...

  7. python中的修饰符@的作用

    1.一层修饰符 1)简单版,编译即实现 在一个函数上面添加修饰符 @另一个函数名 的作用是将这个修饰符下面的函数作为该修饰符函数的参数传入,作用可以有比如你想要在函数前面添加记录时间的代码,这样每个函 ...

  8. Spring cloud微服务安全实战-3-6API安全机制之数据校验

    校验:非空.唯一性等校验 密码的加密:密码加密来存储. 如何做https的访问 校验 一个层面是接口层面,另外一个层面是数据库层面. Springboot给我们提供了简单的封装 校验的包里面还有其他的 ...

  9. Qt编写自定义控件70-扁平化flatui

    一.前言 对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦,而通过渐变色产生的质感色彩反 ...

  10. php 微信公众平台OAuth2.0网页授权，获取用户信息代码类封装demo

    get_wx_data.php <?php /** * 获取微信用户信息 * @author: Lucky hypo */ class GetWxData{ private $appid = ' ...