详解在vue-cli3.0中自定css、js和图片的打包路径


Posted in Javascript onAugust 26, 2019

前言

我们有时候因为一些特殊需求,可能需要将js/css/img等资源文件都打包到根路径下,但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹,并不能针对css/js/img等资源文件分别来做设置,那么请看我如何尝试的吧!

分析

众所周知,vue-cli3.0使用了webpack进行打包处理,那么我们是否可以拿到目前打包默认的一些webpack配置,并在这些配置中找到一些蛛丝马迹,从而更改配置来实现对打包路径的更改呢?

好在vue-cli3.0提供了这样的功能!

我假设您已经安装了vue-cli3.0,那么打开命令行,运行一下命令:

vue ui

这个命令将会启动一个页面,用来简化开发过程中的一系列操作。

我们先导入当前项目(自己摸索下,此处不展开详说)。

我们进入<任务>页面,点击inspect选项卡,并点击运行按钮,将会得到该项目下所有的webpack配置项。

将这个配置复制到我们的编辑器中,然后我们查找路径'js/', 'css/', 'img/',将会看到这些路径所配置的一些地方,我的项目中这些配置在以下部分:

output配置为:

output: {
  path: 'xxx',
  filename: 'js/[name].[contenthash:8].js',
  publicPath: '',
  chunkFilename: 'js/[name].[contenthash:8].js'
}

plugin配置为:

/* config.plugin('extract-css') */
new MiniCssExtractPlugin(
  {
  filename: 'css/[name].[contenthash:8].css',
  chunkFilename: 'css/[name].[contenthash:8].css'
  }
),

loader配置为:

/* config.module.rule('images') */
{
  test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
  use: [
    /* config.module.rule('images').use('url-loader') */
    {
    loader: 'url-loader',
    options: {
      limit: 4096,
      fallback: {
      loader: 'file-loader',
      options: {
        name: 'img/[name].[hash:8].[ext]'
      }
      }
    }
    }
  ]
},
/* config.module.rule('svg') */
{
  test: /\.(svg)(\?.*)?$/,
  use: [
    /* config.module.rule('svg').use('file-loader') */
    {
    loader: 'file-loader',
    options: {
      name: 'img/[name].[hash:8].[ext]'
    }
    }
  ]
},

// 其他类型资源的loader等等

那么问题就简单了,我们更改掉这些webpack配置就可以了。

更改webpack配置

需要更改的webpack相关配置如下:

js路径配置更改

js路径更改output配置即可,output配置在configureWebpack配置项中进行更改,因为vue.config.js中对于configureWebpack选项的配置将会被merge到webpack配置中,所以更改该项配置即可,如下:

module.exports = {
  configureWebpack: config => {
    // js output config
    config.output.filename = '[name].[contenthash:8].js'
    config.output.chunkFilename = '[name].[contenthash:8].js'

  },
}

更改MiniCssExtractPlugin插件配置

更改该配置需要先安装MiniCssExtractPlugin插件到开发依赖中,如下:

npm install --save-dev mini-css-extract-plugin
# 或者
yarn add mini-css-extract-plugin --dev

然后在vue.config.js文件中添加相关配置到chainWebpack即可,如下所示:

module.exports = {
  chainWebpack: config => {
    // css output config
    let miniCssExtractPlugin = new MiniCssExtractPlugin(
      {
        filename: '[name].[contenthash:8].css',
        chunkFilename: '[name].[contenthash:8].css'
      }
    )
    config.plugin('extract-css').use(miniCssExtractPlugin)
  },
}

更改各种资源loader配置

更改该配置仍然需要将相关配置添加到chainWepack配置项中,如下:

module.exports = {
  chainWebpack: config => {
    // image output config
    config.module.rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('url-loader')
      .loader('file-loader')
      .options({
        name: '[name].[hash:8].[ext]'
      })
    config.module.rule('svg')
      .test(/\.(svg)(\?.*)?$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: '[name].[hash:8].[ext]'
      })
  },
}

结语

总的配置项如下所示:

module.exports = {
  configureWebpack: config => {
    // js output config
    config.output.filename = '[name].[contenthash:8].js'
    config.output.chunkFilename = '[name].[contenthash:8].js'

  },
  chainWebpack: config => {
    // css output config
    let miniCssExtractPlugin = new MiniCssExtractPlugin(
      {
        filename: '[name].[contenthash:8].css',
        chunkFilename: '[name].[contenthash:8].css'
      }
    )
    config.plugin('extract-css').use(miniCssExtractPlugin)

    // image output config
    config.module.rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('url-loader')
      .loader('file-loader')
      .options({
        name: '[name].[hash:8].[ext]'
      })
    config.module.rule('svg')
      .test(/\.(svg)(\?.*)?$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: '[name].[hash:8].[ext]'
      })

  },
}

这时,在运行inspect检查webpack配置,即可看到相关路径前的css/,js/,img/等前缀已经消失,快快打包尝试吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
微信小程序实现手势滑动效果
Aug 26 #Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 #Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 #Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 #Javascript
js实现跟随鼠标移动的小球
Aug 26 #Javascript
vue 源码解析之虚拟Dom-render
Aug 26 #Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 #Javascript
You might like
php 小乘法表实现代码
2009/07/16 PHP
php+highchats生成动态统计图
2014/05/21 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
利用python获取Ping结果示例代码
2017/07/06 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
python批量下载抖音视频
2019/06/17 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python实现倒计时小工具
2019/07/29 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
2015年技术员工作总结
2015/04/10 职场文书
放假通知范文
2015/04/14 职场文书
2015年事业单位工作总结
2015/04/27 职场文书