分享webpack插件generate-asset-webpack-plugin，vue打包自动生成额外文件

我们在vue项目实际开发的过程中会有很多公共的配置，比如一些第三方服务的接口、图片服务器地址、cdn地址等等，一般情况下不同的环境会有不同的配置信息。

常规的方法是在pubilc目录下新增config.js，然后在index.html中引入，这样也方便打包部署后，运维根据需求直接修改config.js中的某些地址，而不用重复打包部署。

就像这样：

config.js

index.html

我在近期的项目中新增了一些额外的文件（比如xxx.html,config.js,xxx.txt等），需要根据不同环境打包时放到根目录下。最初肯定是每次打包前我自己手动修改,

最近闲下来就想去自动化生成这些静态资源，于是找到了这个generate-asset-webpack-plugin插件。下边我以自动化生成config.js为例，大致说一下这个插件的用法。

老样子，废话都在外边，有用的话都在注释里，哈哈哈

const path = require('path')
const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
const fs = require('fs')
module.exports = {configureWebpack: {plugins: process.env.NODE_ENV === 'production' ? [ // 生产环境配置new GenerateAssetPlugin({filename: 'config.js', // 定义生成的文件名fn: (compilation, cb) => {/*** 这个compilation参数我没查什么意思，有兴趣可以了解一下* cb的第二个参数就是要生成的文件内容，字符串格式*/cb(null, fs.readFileSync(path.resolve(__dirname, 'build/buildExtraFiles/production/config.js')));},/*** 额外生成的文件路径，比如'icon.png','./build/buildExtraFiles/production/config.js'* 可以看一下源码，也是用fs直接读的文件，需要注意的是，这个操作会直接在你打包生成的文件夹下生成完整的目录结构* 比如我们传的是'./build/buildExtraFiles/production/config.js'，你打包后的文件名是dist，那么你的dist下就是这样的* dist*   .....*   -build*     -buildExtraFiles*       -production*         config.js*/extraFiles: []})] : [ // 开发环境配置new GenerateAssetPlugin({filename: 'config.js',fn: (compilation, cb) => {cb(null, fs.readFileSync(path.resolve(__dirname, 'build/buildExtraFiles/development/config.js')));},extraFiles: []})]},
};

我有话说

由于我实际项目中额外的文件比较多，所以选择了这种形式，在build文件下搞了一块区域管理这些东西，大概这样

其实如果你只有一些url的配置，duck不必用到fs模块

如果你的项目url万年不变，duck不必外放这些配置信息，直接配置到.env.xxx里边,然后根据不同环境打包就好了

分享webpack插件generate-asset-webpack-plugin，vue打包自动生成额外文件相关推荐

vue打包不生成dist文件夹（IDEA使用命令行npm run build命令打包）
记录一下自己的愚蠢问题!!! 问题出现情况:我是使用IDEA打开的vue项目,并在IDEA的命令行(terminal)中执行vue打包命令(npm run build)的,打包结果会显示成功,但是没有 ...
[vue] 怎么修改vue打包后生成文件路径？
[vue] 怎么修改vue打包后生成文件路径? webpack:output.path vue-cli3: outputDir 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
flask 渲染 vue 打包后的dist文件（直接用后端渲染）
flask 渲染 vue 打包后的dist文件(直接用后端渲染) vue项目打包出dist文件 npm run build 代码 from flask import Flask from flask ...
vue打包后更改js文件名称
好好学习 ,天天向上.Are you ready? vue默认打包dist文件(js文件默认名称) vue打包后更改js文件名称例如: 中间部分加时间戳代码奉上修改vue.config.js c ...
霖呆呆的六个自定义Webpack插件详解-自定义plugin篇(3)
霖呆呆的webpack之路-自定义plugin篇你盼世界,我盼望你无bug.Hello 大家好!我是霖呆呆! 有很多小伙伴在打算学写一个webpack插件的时候,就被官网上那一长条一长条的API给吓 ...
自动生成Mapper文件（基于Mybatis Maven插件）
自动生成Mybatis的Mapper文件工作中使用mybatis时我们需要根据数据表字段创建pojo类.mapper文件以及dao类,并且需要配置它们之间的依赖关系,这样的工作很琐碎和重复,myba ...
实现打包后修改服务器接口地址,vue打包之后生成一个配置文件修改接口
我们的vue代码打包上传到服务器之后,生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名,只修改这个配置文件即可. 第一步:安装generate-asset-webpack-pl ...
eclipse中mybatis generator插件的安装与使用，实现自动生成代码
git地址:https://github.com/mybatis/generator 下载后解压: 选择任意一个版本的jar放到eclipse的features目录下即可选择任意一个版本的jar放到 ...
vue前端自动生成编号或者订单单号（日期+随机数）
created () {// 调用获取当前日期的方法加四位随机数赋值表单中的项目编号this.form.number = this.getProjectNum() + Math.floor(Math ...

分享webpack插件generate-asset-webpack-plugin，vue打包自动生成额外文件

分享webpack插件generate-asset-webpack-plugin，vue打包自动生成额外文件相关推荐

最新文章

热门文章