move-assets-webpack-plugin

• Documentation
• 文档

Features

Move the output files to other directories after the build.

Technically, this plugin modifies the asset's path while compiling, so the files are directly written to the target directory, rather than moved after the build.

If the output looks like this:

+ dist/
  + js/
  + css/
  + index.html

However you have to move the files separately into the backend directory, like this:

+ WebRoot/
  + public/
    + js/
    + css/
  + WEB-INF/
    + view/
      + index.html

Now you may need this plugin.

⚠️ If you are using create-react-app, please make sure to check the differences between @vue/cli and create-react-app mentioned at the end.

⭐ If this plugin helped, please star the repo, Thanks!

Getting Started

npm install move-assets-webpack-plugin -D

const MoveAssetsPlugin = require("move-assets-webpack-plugin")

new MoveAssetsPlugin({
  clean: true,
  patterns: [
    {
      from: 'dist/static',
      // files in `to` will be deleted
      // unless `clean` is set to `false`
      to: '../be/public/static'
    },
    {
      from: 'dist/index.html',
      to: '../be/view/index.html'
    },
  ]
})

Options

patterns

Type: Array

Default: []

Required: false

Match Rules. Wildcard characters like js/*.js are not supported yet. The plugin will not work if patterns is an empty array.

All the paths are relative to the context of webpack.config.js.

clean

Type: Boolean

Default: true

Required: false

Whether delete old files. Old files are files the to field given in the option patterns refer to.

false could not guarantee that the old files would always be kept. If new files have same names as the old files, old files will be overwritten.

Attention

The Order of Plugins

In short, always put this plugin at the end of the plugins option.

This plugin must be placed after plugins that may add files to compilation.assets, or when this plugin is called, files not added are unable to be processed.

For example, html-webpack-plugin adds a html file to compilation.assets. If MoveAssetsPlugin is called before HtmlWebpackPlugin, the rules operating html files will not work because the html file is not added to compilation.assets yet.

The Order of Patterns

Rules that are more specific should be placed ahead.

const patterns = [
  {
    from: 'dist/js/libs',
    to: '../be/public/libs'
  },
  {
    from: 'dist/js',
    to: '../be/public/js'
  }
]

In this case dist/js/libs is more specific than dist/js, so it should be in front of dist/js.

Why Using This Plugin

Why not write a script, or just edit webpack.config/vue.config.js?

The shortcoming of writing a script is that the script is out of the webpack build process, making the webpack environment variables inaccessible.

When using webpack.config.js, it does work by editing the config file, however the config will become complicated if there are too many paths to edit. This plugin offers an interface so that you don't have to change the original config.

For cli users, such as @vue/cli, it does not offer many relative options. Basically you can only move the entire dist, and it's hard to move files in it.

Development

Why Changing the Compiling Process?

It seems an easy and efficient way to move the outputs using modules like fs in a hook after all files are written to the disk.

So why modifying the asset's path during compiling process instead of moving after the build process?

Here's the problem, @vue/cli and create-react-app will calculate the gzipped sizes of files after the build, and this is after the webpack build process and will use the assets data returned by webpack. An error will be thrown if files are moved to other directories.

The Differences Between @vue/cli And create-react-app

The conclusion is: When using create-react-app, this plugin is unable to move files copied from public to build.

This is because those two take different measures to process the public files.

@vue/cli uses copy-webpack-plugin to handle files in public directory, which adds public files to compilation.assets. With the ability of webpack the files are written to new directories. This is not a real copy-paste process.

In other words, all files in the dist existed in compilation.assets, so this plugin is able to operate all of them.

create-react-app does a real copy-paste to public. There is a function used to copy files in the build script, and the webpack build process is after the copy process.

Now that public files will not be added to compilation.assets, this plugin is unable to process those files.