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静态目录。