rename-output-webpack-plugin's Introduction

Rename Output Webpack Plugin

Webpack plugin to custom rename each outfile files / chunks generated during build.

Installation

npm install rename-output-webpack-plugin --save-dev

Usage

// webpack.config.js

const renameOutputPlugin = require('rename-output-webpack-plugin');

module.exports = {
    entry: {
        'core': './src/core.js',
        'app': './src/index.js',
        'jquery': ['jquery'],
        'angular-suite': ['angular', 'angular-ui-bootstrap', 'angular-ui-router'],
    },
    output: {
        'filename': '[name]-[id].js',
        'path': path.resolve(__dirname, 'dist')
    },
    plugins: [
        new renameOutputPlugin({
            'core': 'framework-[hash].js',
            'jquery': '[name]-[version].min.js',
            'angular-suite': '[name]-[version@angular].min.js'
        })
    ]
};

This configuration will generate following files:

Hash: 7aa4bcb22d7fa4791dd8
Version: webpack 3.8.1
Time: 1812ms
                            Asset     Size  Chunks                    Chunk Names
                         app-0.js  2.08 MB       0  [emitted]  [big]  app
       angular-suite-1.6.6.min.js  1.73 MB       1  [emitted]  [big]  angular-suite
              jquery-3.2.1.min.js   271 kB       2  [emitted]  [big]  jquery
framework-7aa4bcb22d7fa4791dd8.js   271 kB       3  [emitted]  [big]  core

Using [version]

In Webpack configuration (webpack.config.js), output.filename supports following substitutions:

[hash]
[chunkhash]
[name]
[id]
[query]

This plugin adds one more substitution [version]. [version] allow you to use version of dependency within your output bundle filename. For e.g. If you are using jquery and chunking it separately, you can add [version] to ensure right version (from jquery module package.json) is added within output filename.

module.exports = {
    entry: {
        'jquery': ['jquery']
    },
...
    plugins: [
        new renameOutputPlugin({
            'jquery': '[name]-[version].min.js'
        })
    ]
};

              Asset     Size  Chunks                    Chunk Names
jquery-3.2.1.min.js   271 kB       2  [emitted]  [big]  jquery

License

This project is licensed under the MIT License - see the LICENSE file for details

rename-output-webpack-plugin's People

Contributors

Stargazers

Watchers

rename-output-webpack-plugin's Issues

webpack4 Tapable.plugin is deprecated

In the latest webpack version.(4.12.0)
This plugin has warning.

(node:8144) DeprecationWarning: Tapable.plugin is deprecated. Use new API on '.hooks' instead

Fails with Webpack 5

[webpack-cli] TypeError: compiler.plugin is not a function
at renameOutputPlugin.apply (/app/node_modules/rename-output-webpack-plugin/dist/index.js:87:22)
at createCompiler (/app/node_modules/webpack/lib/webpack.js:69:12)
at create (/app/node_modules/webpack/lib/webpack.js:113:15)
at webpack (/app/node_modules/webpack/lib/webpack.js:121:46)
at f (/app/node_modules/webpack/lib/index.js:35:15)
at WebpackCLI.createCompiler (/app/node_modules/webpack-cli/lib/webpack-cli.js:176:24)
at WebpackCLI.run (/app/node_modules/webpack-cli/lib/webpack-cli.js:268:25)
at async runCLI (/app/node_modules/webpack-cli/lib/bootstrap.js:59:9)

Recommend Projects