https://github.com/lkiarest/html-webpack-plugin-assets-fix

fix assets(js/css) path in html files while building multiple entry files
https://github.com/lkiarest/html-webpack-plugin-assets-fix

Last synced: 11 months ago
JSON representation

fix assets(js/css) path in html files while building multiple entry files

• Host: GitHub
• URL: https://github.com/lkiarest/html-webpack-plugin-assets-fix
• Owner: lkiarest
• License: mit
• Created: 2017-05-20T07:06:18.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2018-08-31T03:34:45.000Z (almost 8 years ago)
• Last Synced: 2024-08-09T21:09:55.173Z (almost 2 years ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# html-webpack-plugin-assets-fix

Fix html-webpack-plugin [Issue](https://github.com/jantimon/html-webpack-plugin/issues/665) that the relative assets(js/css) paths are incorrect while building multiple entries. 

__Before importing this plugin for sub directory resolve, please try to modify your publicPath to be relative such as '../' and check it at first.__

### What's it

When you wanna generate multiple entry html files via webpack and release target files within different sub directories, generally you'll config as below:

```

module.exports = {

    entry: {

        a: 'a.js',

        b: 'b.js'

    },

    output: {

        path: 'your/dist/path',

        filename: '[name]/[name].[hash].js',

        publicPath: ''

    },

    plugins: [

        new HtmlWebpackPlugin({filename: 'a/index.html', chunks: ['a'], template: 'your/template/file/a'}),

        new HtmlWebpackPlugin({filename: 'b/index.html', chunks: ['b'], template: 'your/template/file/b'})

    ]

```

after build, the dist directory seems ok:

```

├── dist

│   ├── a

│   │   ├── index.html

│   │   └── a.xxxx.js

│   ├── b

│   │   ├── index.html

│   │   └── b.xxxx.js

```

but links of js/css files are incorrect in output html files, in 'a/index.html':

```

 

```

actually it should be:

```

 

```

This plugin is to fix the relative path of asset files in target html file.

### Usage

```

npm i html-webpack-plugin-assets-fix -D

// import this plugin in 'webpack.conf.js'

const HtmlWebpackPathAssetsFix = require('html-webpack-plugin-assets-fix')

//...

    plugins: [

        new HtmlWebpackPlugin({

            filename: 'a/index.html', 

            chunks: ['a'], 

            template: 'your/template/file/a',

            fixAssets: true

        }),

        new HtmlWebpackPlugin({

            filename: 'b/index.html', 

            chunks: ['b'], 

            template: 'your/template/file/b',

            fixAssets: true

        }),

        new HtmlWebpackPathAssetsFix()

    ]

//...

```