file-minify-webpack-plugin

webpack文件压缩插件，同时可以进行文件的拷贝移动，参考copy-webpack-plugin

可以对当前的静态文件进行移动和压缩(html,css,js,json)

安装

npm i -D copy-webpack-plugin

使用

webpack.config.js

const FileMinifyWebpackPlugin = require('file-minify-webpack-plugin')

const config = {
  plugins: [
    new FileMinifyWebpackPlugin([ ...options ], globOption)
  ]
}

options

|属性|类型|默认值|描述| |:--:|:--:|:-----:|:----------| |[from](#from to)|{String}|undefined|需要匹配的文件，接受minimatch options表达式| |[to](#from to)|{String}|空|输出文件的地址，为空默认输出到output根目录下| |force|{Boolean}|false|是否重写已写入 compilation.assets 中的文件，即覆盖其它plugins/loaders处理过的文件| |ignore|{Array/String}|[]|from文件中需要忽略的文件| |minify|{Boolean}|bool|是否对匹配的文件进行压缩| |flatten|{Boolean}|false|删除所有目录引用，仅复制文件名，如果文件同名，则可能出现覆盖的情况| |transform|{Function\|Promise}|(content, path) => content|在文件输出之前，对文件内容进行修改或其它操作，content为compilation.assets[xxx].source()| |context|{String}| 空 |from的根路径，可不填| |options|{Object}|{}|压缩配置参数|

from to

webpack.config.js

[
  new FileMinifyWebpackPlugin([
    { from: ',/common/', to: '/to/dest/' },
    { from: '/common**/*.html', to: '/to/dest/' }
  ], globOption)
]

force

webpack.config.js

[
  new FileMinifyWebpackPlugin([
    { from: 'src/**/*', to: 'dest/', force: true }
  ], globOption)
]

ignore

webpack.config.js

[
  new FileMinifyWebpackPlugin([
    { from: 'src/**/*', to: 'dest/', ignore: [ '*.js' ] }
  ], globOption)
]

flatten

webpack.config.js

[
  new FileMinifyWebpackPlugin([
    { from: 'src/**/*', to: 'dest/', flatten: true }
  ], globOption)
]

transform

webpack.config.js

[
  new FileMinifyWebpackPlugin([
    {
      from: 'src/*.png',
      to: 'dest/',
      transform (content, path) {
        return optimize(content)
      }
    }
  ], globOption)
]

context

webpack.config.js

[
  new FileMinifyWebpackPlugin([
    { from: 'src/*.txt', to: 'dest/', context: 'app/' }
  ], globOption)
]

options

代码压缩分别通过UglifyJs、Clean-Css、Html-Minifier进行JS、CSS、HTML压缩

webpack.config.js

[
  new FileMinifyWebpackPlugin([
    { from: 'src/*.txt', to: 'dest/', option: {
        mangle : false
        ...
    }}
  ], globOption)
]

globOption

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |debug|{String}|'warning'|Debug Options| |ignore|{Array}|[]|全局需要忽略的from文件，对所有的option生效| |context|{String}|compiler.options.context|全局上下文根目录| |afterTask|{function}|(complication) => ''|执行完成所有压缩复制任务后的操作|

debug

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |'info'|{String\|Boolean}|false|文件位置信息和读取信息输出| |'debug'|{String}|false|详细的debug信息输出| |'warning'|{String}|true|警告信息输出|

'info'

webpack.config.js

[
  new FileMinifyWebpackPlugin(
    [ ...patterns ],
    { debug: 'info' }
  )
]

'debug'

webpack.config.js

[
  new FileMinifyWebpackPlugin(
    [ ...patterns ],
    { debug: 'debug' }
  )
]

'warning' (default)

webpack.config.js

[
  new FileMinifyWebpackPlugin(
    [ ...patterns ],
    { debug: true }
  )
]

global-ignore

webpack.config.js

[
  new FileMinifyWebpackPlugin(
    [ ...patterns ],
    { ignore: [ '*.js', '*.css' ] }
  )
]

context

webpack.config.js

[
  new FileMinifyWebpackPlugin(
    [ ...patterns ],
    { context: '/app' }
  )
]

afterTask

webpack.config.js

[
  new FileMinifyWebpackPlugin(
    [ ...patterns ],
    { afterTask:(complication) =>{
      ...
    })}
  )
]