webpack特殊配置

webpack现在都有默认的脚手架了，里面包含常用的配置，包括测试环境，开发环境配置，js解析，css loader，图片处理等等，如果有兴趣可以直接去build里面看源码，这里不做过多的讲述，今天只记录两个特殊配置。后面如果了解到更多的实用配置项会持续更新

1. 整个文件夹的图片复制到dist下面，不管是否引用该图片
   场景：banner图在N张图里面选择展示一张，图片并没有引用
   配置如下：

var CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [
  new CopyWebpackPlugin([
      {
        from: 'src/assets/*',
        to: 'static/img',
        flatten: true
      }
    ], {
      ignore: [],
      copyUnmodified: true,
      debug: "debug"
    })
]

2. 图片的存放地址根据原图片的路径放置，可以不同来源的文件存到不同的地址
   场景：图片需要和js文件在一起，多个项目分别放置
   配置如下：

  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          limit: 10000,
          name (file) {
            // 如果是node_modules里面的图片就生成一个空文件（mac）也可以生成隐藏文件，忽略掉
            if (!/node_modules\//.test(file)) {
                //file 获取到的是该图片在你的电脑中的位置
               let folderName = /xxxx\/([A-Za-z\-]+)/.exec(file)[1]
               // folderName示例获取的是文件夹的名称，这个正则可以根据俄需要随意修改
               // version 代表版本，需要自己配置
               //[name] 是文件名字，自动获取
               //[ext] 是拓展名
               return `/${folderName}/${folderName}-${version}/[name].[ext]`
            } else {
              return '.DS_Store'
            }
          }
        }
      }
    ]
  }