首页 > 其他分享 >发布-build命令

发布-build命令

时间:2022-09-03 21:55:59浏览次数:55  
标签:文件 dist 发布 js 命令 webpack build loader

1.配置webpack的打包发布

  在package.json文件的script节点下,新增build命令如下:

"script":{
    "dev":"webpack server",//开发环境中,运行 dev 命令
    "build":"webpack --mode production" //项目发布时,运行build命令
}

2.把JavaScript文件统一生成到js目录中

  在webpack.config.js配置文件的output节点中,进行如下的配置:

output:{

  path:path.join(__dirname,'dist'),

  //明确告诉webpack 把生成的bundle.js 文件存放到 dist 目录下的js子目录中

  filename:'js/bundle.js',

}

3.把图片文件统一生成到image目录中

  修改webpack.config.js中的url-loader配置项,新增outputPath选项即可指定图片文件的输出路径:

{
    test:/\.jpg|png|gif$/,
    user:{
        loader:'url-loader',
        options:{
            limit:22228,
            //明确指定把打包生成的图片文件,存储到dist目录下的image文件中
            outputPath:'image',
        },
    },
}

  或者修改module->rules->test(推荐):

//处理图片的loader
//如果需要调用的loader只有一个,则只传递一个字符串也许,如果有多个loader,则必须指定数组
//在配置url-loader的时候,多个参数之间,使用&符号进行分隔
{test:/\.jpg|png|gift$/,use:'url-loader?limit=470&outputPath=images'},

4.自定清理dist目录下的旧文件clean-webpack-plugin

  为了每次打包发布时

标签:文件,dist,发布,js,命令,webpack,build,loader
From: https://www.cnblogs.com/funkyd/p/16653778.html

相关文章

  • FastJson远程命令执行漏洞学习笔记
    FastJson远程命令执行漏洞学习笔记Fastjson简介fastjson用于将JavaBean序列化为JSON字符串,也可以从JSON字符串反序列化到JavaBean。fastjson.jar是阿里开发的一款专门用......
  • linux 上发布.netcore
    环境的准备1.windows环境1).虚拟机:这里我用VMware2).linux:这里我用CentOS73).文件传输工具:MobaXterm(用于windows发布文件上传,很多人可能会用XShell,都可以的) 2.lin......
  • linux 关机命令总结
    linux关机命令总结-wanggd_blog-博客园 https://www.cnblogs.com/wanggd/archive/2013/07/08/3177398.htmllinux下常用的关机命令有:shutdown、halt、poweroff、ini......
  • 每天一个linux命令(37):date命令
    每天一个linux命令(37):date命令-peida-博客园 https://www.cnblogs.com/peida/archive/2012/12/13/2815687.html在linux环境中,不管是编程还是其他维护,时间是必不可少......
  • 每天一个linux命令(42):kill命令
    每天一个linux命令(42):kill命令-peida-博客园 https://www.cnblogs.com/peida/archive/2012/12/20/2825837.htmlLinux中的kill命令用来终止指定的进程(terminate a p......
  • Linux TOP 交互命令
    LinuxTOP交互命令-hao_xiaoyu-博客园 https://www.cnblogs.com/haoxiaoyu/p/3933924.html今天总结一点top命令的一些交互命令,比较实用!h或者?   显示......
  • Linux top命令的用法详细详解
    Linuxtop命令的用法详细详解_xiaoL_clo的博客-CSDN博客_linuxtop命令的用法详细详解 https://blog.csdn.net/dxl342/article/details/53507673查看多核CPU命令mpstat......
  • Docker日常工作常用命令
    容器生命周期管理Docker创建新容器并运行[run]语法:dockerrun[OPTIONS]IMAGE[COMMAND][ARG...]OPTIONS说明:-astdin:指定标准输入输出内容类型,可选STDIN/STDOU......
  • 详述 Git 的 rebase 命令使用方法
    在基于Git的开发过程中,我们很容易遇到合并代码的情况,例如我们从master分支拉取了一个feature分支,当我们开发到一段时间之后,可能需要将master的代码合并到我们当前......
  • 命令行查看python版本弹出应用商店
    命令行查看python版本弹出应用商店win10系统,在命令行输入python查看版本,弹出应用商店,出现该问题的原因可参考下列博客:链接:https://blog.csdn.net/qq_36949278/article......