Laravel-mix: Feature Request - Add support for `html-webpack-plugin`

Created on 11 Dec 2017 · 3Comments · Source: JeffreyWay/laravel-mix

Hi there,

Would be nice if we could have support for the popular html-webpack-plugin, so we could inject the webpack compiled output references directly into static HTML files.

For example, for the following setup:

src/
- index.html
- index.ts
webpack.mix.js
package.json

// webpack.mix.js

const mix = require('laravel-mix');

mix.setPublicPath('public');

mix.ts('src/index.ts', 'public/dist');
mix.html('src/index.html', 'public');

// src/index.html

<!DOCTYPE html>
<html>
<head>
  <title>Demo Page</title>
  <link rel="stylesheet" href="https://example.com/bootstrap.css"/>
</head>
<body>
  <p>This is a demo page...</p>
</body>
</html>

Would produce the following file structure:

src/
- index.html
- index.ts
public/
- dist/
- index.js
- index.html
webpack.mix.js
package.json

// public/index.html

<!DOCTYPE html>
<html>
<head>
  <title>Demo Page</title>
  <link rel="stylesheet" href="https://example.com/bootstrap.css"/>
</head>
<body>
  <p>This is a demo page...</p>
  <script src="dist/index.js"></script>        // The injected script tag
</body>
</html>

Any thoughts?

Thanks 😃

Source

elliotleelewis

👍6

Most helpful comment

Also, I am aware that you can just do this:

const HtmlWebpackPlugin = require('html-webpack-plugin');

mix.webpackConfig({
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
  ],
});

But then it doesn't have support for doing stuff like mix.version()...

elliotleelewis on 11 Dec 2017

👍3

All 3 comments

Also, I am aware that you can just do this:

const HtmlWebpackPlugin = require('html-webpack-plugin');

mix.webpackConfig({
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
  ],
});

But then it doesn't have support for doing stuff like mix.version()...

elliotleelewis on 11 Dec 2017

👍3

The problem is that mix.version now happens after Webpack itself has finished running, so there is no way to use a Webpack plugin at that point. It would probably have to be reimplemented from scratch.