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

最新推荐文章于 2024-07-30 14:36:21 发布
最新推荐文章于 2024-07-30 14:36:21 发布
阅读量1k 收藏
点赞数
文章标签： webpack javascript ViewUI
原文链接：http://www.cnblogs.com/jehorn/p/10833068.html
版权

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

1012606-20190508170956933-1605167180.png

这时候没有在项目中引用，不会经过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>

至此就算大功告成。

1012606-20190508171007298-1290076659.png

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

转载于:https://www.cnblogs.com/jehorn/p/10833068.html

weixin_30729609
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
copy-webpack-plugin 拷贝和压缩文件
weixin_41643133的博客
07-11 4975
不说废话，直接上代码，实现拷贝和压缩 安装依赖包(npm、yarn安装均可) 1.1 yarn add copy-webpack-plugin -D 1.2 yarn add uglify-es -D 1.3 yarn add clean-css -D webpack配置文件添加如下写法 const CopyWebpackPlugin = require('copy-webpack-plugi...
22、webpack快速入门——集中拷贝静态资源
你的才华撑不起野心时，静下心学习；你的能力驾驭不了目标时，沉下心努力
02-07 965
  工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档）， 这些静态资源有可能是文档，也有可能是一些额外的图片。项目组长会要求你打包时保留这些静态资源， 直接打包到制定文件夹。其实打包这些资源只需要用到copy-webpack-plugin。 1.首先新建文件夹public，然后在网上随便找几张图片，保存在文件夹内   2.安装插件   ...
基于webpack 4静态资源打包压缩配置（扩展篇）
jagger_guo的博客
03-08 389
1. 基于上一篇基于webpack 4静态资源打包压缩配置进一步扩展，如下 README.md： # webpack-tool-usage 特性列表： ## 1. 多入口项目打包（js/css/html） ## 2. webpack-dev-server启动热更新监听，加载内存中的编译文件 ## 3. 支持单独js文件打包（适用于一些sdkt接口的开发，类似于jquery) ## 4...
webpack打包 图片，样式 等静态资源文件
weixin_45966674的博客
01-27 1250
其实前面的都不足以展示出webpack在众打包工具中的优势 webpack的优势在于 可以打包大规模项目文件 以及静态资源文件 这才是webpack独有的优势 首先我们来创建一个webpack项目 找一个文件夹 在终端中输入 npm init 根据提示操作 就会生成一个package.json 将webpack引入进来 npm install webpack webpack-cli --save-dev 然后在终端输入 npm install html-webpack-plugin --save
webpack将静态资源压缩语法转义后拷贝至目标文件夹
我叫陈小皮。
10-12 671
使用webpack相关插件以及babel 完成项目中单独某个文件或文件夹下 静态资源拷贝压缩以及语法转移
webpack 静态资源集中输出的方法示例
10-17
主要介绍了webpack 静态资源集中输出的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli与webpack处理静态资源的方法及webpack打包的坑
08-27
当你在Vue组件的模板或CSS中使用这些资源时，Webpack会通过`url-loader`和`file-loader`将它们转换为模块依赖，并根据Webpack的输出配置生成相应的URL。这样做的好处是，资源可以被内联、复制或重命名，适应不同的...
Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件
08-30
Webpack 静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin 插件 Webpack 中的静态资源处理是一个非常重要的 topic，今天我们来介绍 Webpack 中的静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin ...
基于webpack 4静态资源打包压缩配置
jagger_guo的博客
11-04 1505
需求： 1. 实现静态资源js/css/less的打包、压缩； 2. html文件加载对应的js/css/img文件； 配置： 工程github仓库地址 工程目录结构如下： 使用webpack4 涉及到的文件配置如下： package.json { "name": "webpackproject", "vers...
webpack 如何同时输出压缩和未压缩的文件的实现步骤
10-15
主要介绍了webpack 如何同时输出压缩和未压缩的文件的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack4打包实战
woyebuzhidao321的博客
02-17 3973
一、模块化打包工具的由来 ES Module存在环境兼容问题，通过模块化方式划分的模块较多，网络请求频繁，在前端应用开发中不仅仅需要JavaScript代码需要模块化，随着应用的日益复杂，html，css同样也面临相同的问题，也就是说，所有的前端资源都需要模块化。 所需要的工具需要满足的条件： 新特性代码编译 模块化JavaScript打包 支持不同文件类型的资源模块 打包工具：解决前端整体的模块化，并不单指JavaScript模块化 二、模块打包工具概要 核心： 模块打包器（Module bund
webpack指定输出资源的路径和名称
jieyucx的博客
06-08 3332
如图，在前面的章节我们打包后的文件默认都输出到了dist目录下，无论是图片、还是js都在同一级别目录，这里目前处理的资源比较少，如果资源一多，所有的资源都在同一级目录，看起来很费劲。那么这节就介绍一下如何将打包的资源输出到指定的目录，例如，图片资源输出到下，js文件输出到dist/js下。
webpack资源输入输出
qq_31830547的博客
02-09 682
webpack资源输入输出模块 主要学习webpack打包工具的来源以及产出，相关资源文件配置 资源处理流程 指定入口文件（entry）一般是默认是src下面的main.js或者index.js，将存在依赖关系的包模块打包成为一个chunk（代码块），一个chunk可能包含多个依赖的模块文件，webpack将依赖模块进行打包封装形成chunk，根据配置不同形成多个chunk。 由chunk资源打包的最终产物名为bundle，一般产出为dist/bundle.js最后引入到html文件中。 入口文件可以定义多
webpack(v4.8.3)中静态资源输出以及使用第三方库的两种方法
冰雪为融的博客
05-22 838
一、webpack中静态资源输出所谓静态资源输出，说白了就是一些文件不需要经过webpack处理，直接输出到指定的地方（类似于粘贴复制）实现步骤：1、npm i copy-webpack-plugin -D2、引入  const  CopyWebpackPlugin = require('copy-webpack-plugin');3、使用：new CopyWebpackPlugin([{ ...
vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）
weixin_43369521的博客
10-09 7467
vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）场景重点意淫 场景 业务要求能够直接通过 “域名+/file”的方式访问静态资源的html，然而产品绝对static暴露在url中不好看又不能直接将html放在static中。所以想到了既然static可以直接访问，那么给他新加几个文件目录应该不是问题。 重点 在webpack.dev...
webpack copy-webpack-plugin拷贝资源插件
蜗牛速度额的博客
10-21 2519
- copy-webpack-plugin  在webpack中拷贝文件和文件夹 cnpm install --save-dev copy-webpack-plugin new CopyWebpackPlugin([{ from: __dirname + '/src/public' }]); //作用：把public 里面的内容全部拷贝到编译目录 from 定义要拷贝的源...
webpack4.x 抽离css文件和压缩
lqx_520的博客
12-25 2310
今天来分享一个前端自动化构建工具webpack4x 抽离css文件和压缩的方法。 下载的具体步骤就不介绍了，相信各位大佬都已经深谙此道，首先我写一个webpack.config.js配置文件，如下代码 const webpack = require('webpack'); const ExtractTextPlugin = require("extract-text-webpack-plug...
webpack dev server -- 以及修改html页面不更新问题
最新发布
小诏
07-30 310
选项，Webpack Dev Server 将会在每次构建时将文件写入磁盘，从而能够检测到 HTML 文件的变化。这样可以解决修改html模版，不更新问题。但是会在dist目录下创建很多文件。首先安装webpack dev server。配置webpack.config.js。发现 修改html模版，页面不更新。：就会解决以上问题。
webpack配置静态资源入口
06-07
name: 'images/[name].[hash:8].[ext]' // 静态资源输出路径及文件名格式 } } ] } ] } ``` 3. 在代码中引入静态资源： ``` import myImage from './images/my-image.png'; ``` 这样就可以在代码中引用静态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值