filemanager-webpack-plugin:项目webpack打包后移动dist里的文件夹

某个vue项目打包后,有些静态资源的存放位置不太符合预期,导致访问这些资源的时候404。

希望改变打包后这些资源的存放位置,使其能够被正确访问。

一开始考虑的是copy-webpack-plugin - npm插件,但这个插件的本质是复制文件,虽然也能实现最终效果,但不符合程序员节能的思想,不想存在两份一模一样的文件,只想做移动操作。

最后,选用filemanager-webpack-plugin - npm

如下,

打包后为

- dist

  - index.html 

  - svg

  - cmdb

    - css

    - fonts

    - img

    - js

想将 svg 整个文件夹移动到 dist/cmdb里面去

vue.config.js修改如下

const FileManagerPlugin = require('filemanager-webpack-plugin')
module.exports = {
  // app部署路径
  publicPath: '/',
  // build目录
  outputDir: 'dist',
  assetsDir: SYSTEM_ID,
  configureWebpack: {
    output: {
      ......
    },
    plugins: [
      new FileManagerPlugin({
        events: {
          onEnd: {
            move: [
              { source: './dist/svg', destination: './dist/cmdb/svg' }
            ]
          }
        }
      })
    ]
  },
  ......
}

你可能感兴趣的:(Vue,Webpack,webpack,前端,javascript)