hmsk/symlink-webpack-plugin

🔗 Make symbolic links among files built by Webpack

Symlink Webpack Plugin

A webpack plugin to make symbolic links in output dir.

Installation

npm i -D symlink-webpack-plugin

Usage

In your webpack config:

const SymlinkWebpackPlugin = require('symlink-webpack-plugin');

module.exports = {
  // ...etc
  plugins: [
    new SymlinkWebpackPlugin({ origin: 'index.html', symlink: '200.html' })
  ]
};

This setting makes symbolic link file [ouput_path]/200.html to [ouput_path]/index.html.

You can give configurations as Array

const SymlinkWebpackPlugin = require('symlink-webpack-plugin');

module.exports = {
  // ...etc
  plugins: [
    new SymlinkWebpackPlugin([
      { origin: 'index.html', symlink: '200.html' },
      { origin: 'index.html', symlink: 'error_pages/404.html' },
    ])
  ]
};

force option (default: false)

const SymlinkWebpackPlugin = require('symlink-webpack-plugin');

module.exports = {
  // ...etc
  plugins: [
    new SymlinkWebpackPlugin([
      { origin: 'index.html', symlink: '200.html', force: true },
      { origin: 'index.html', symlink: '404.html' },
    ])
  ]
};

The plugin doesn't make any symlink if a directory for a destination doesn't exist as default. Passing an option force: true, will create it regardless.

When directories of symlink don't exist, force option allows to dig. For instance, what if a config has symlink: 'one/two/200.html' but one/two/ dir doesn't exist when the plugin runs, one, one/two directories will be created.

hook option (default: afterEmit)

You can point an exact compiler hook to make a symlink.

  { origin: 'index.html', symlink: '200.html', hook: 'entryOption' },

Development

yarn
yarn test

License

MIT

symlink-webpack-plugin's Issues

Would like to be able to link to a file whose name includes [hash]

I would like to symlink to a file in the build dir, but the file is created using

  output: {
    filename: '[name].[hash].js',

I would like to use the following follow syntax in your plugin, but I don't think it's supported?

    new SymlinkWebpackPlugin({ origin: '[name].[hash].js', symlink: '[name].js' }),

(or possibly just using the [hash] substitution, as I can hardcode the names)

Thanks!

Symlinked assets are not emitted in compilation.assets

Because all work is being done in after-emit, webpack doesn't have any insight into which symlinks are produced by this plugin. This is in contrast to many other plugins which emit files: by adding the output files to compilation.assets, tools like webpack-dev-server will be able to serve the output files.

I spent some time attempting to get this working: unfortunately, since we have to account for assets being emitted as well as assets already on disk, it seems tricky to make this work for something like webpack-dev-server (which doesn't write to disk). It's possible I missed something we could use, or a simpler approach.

Any ideas on how this could work? At a minimum, having the plugin emit files for things already on disk might be a decent start. For output bundles etc. which won't be on disk at the time of emit, we might need a second pass using need-additional-pass, or set up the asset in compilation.assets in the emit stage, and then make the actual symlink later in after-emit. Finally, for webpack-dev-server, I'm still unsure how to handle all the above cases.

Not working for directories

I want to create a symlink to the directory projectRoot/static, but the plugin does not create it. If I use force=true, according to the command readlink static, the created symlink points to mnt/data/.../projectRoot/static , which is almost correct, except by the fact that it does not start with '/'. The path /mnt/data/.../projectRoot/static (with '/') would be correct.

// projectRoot/frontend/webpack.config.js
const staticPath = path.resolve(__dirname, `../static`);
const buildPath = path.resolve(__dirname, `../dist`);
module.exports = {
  ...
  output: { path: buildPath, ... },
  plugins: [ ..., new SymlinkWebpackPlugin([{ origin: staticPath, symlink: 'static' }])],
};

running this plugin clobbers process.cwd()

It looks like the working directory is temporarily changed here, but is erroneously reset it to __dirname instead of the old process.cwd() value.

__dirname refers to the directory of the current module, not the current working directory so my cwd is being reset to something like "./node_modules/symlink-webpack-plugin", which causes other webpack plugins that read process.cwd() to fail.

Add an optional “force” parameter

Thanks for your plugin, it does exactly what I need... except I need an optional force parameter to pass in, to create the symlink even if the target file doesn't (yet) exist. I created a PR for the changes:

#4