CopyWebpackPlugin配置vue开发中static静态目录
2018-10-31 22:35

CopyWebpackPlugin插件

先看一下这个插件在webpack的配置

new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

to属性对应的值如下config文件的内容

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    ...
    }
 }

这个配置是表示将static目录下的文件在编译的时候直接拷贝到dist目录下的static目录下面,并且不做任何改变。

有了这一项配置,对于一些可变资源,如网站logo,网站背景,网站主样式等经常变换的资源,可以直接放到static目录中。这样我们就可以在vue开发中如下方式使用:

.info-list li{
      position: relative;
      padding: 10px;
      font-size: 12px;
      overflow: hidden;
      cursor: pointer;
      background-image:url('/static/images/yj1.png');
      background-size:100% 100%;
      color: #fff;
    }
.info-list li:not(.selected):hover{/*background:#7183D0;*/background-image: url(/static/images/yj2.png);}
.info-list li:not(.selected):hover .font_family{color:#fff;}
.info-list li:not(.selected):hover .time-num{color:#fff;}
.info-list .selected{
  background-image: url('/static/images/yj3.png');
  color: #fff;
}

这样,对于编译后上线的项目,如果logo或者相应主题要变换的话,我们可以直接替换对应图片资源就可以了,而不用重新打包编译。

不过,如果我们使用vue-cli生成的项目的话,这项配置是已经配置好的。但是知道这个插件的作用,能让我们更方便的利用static静态目录。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(667)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1