HTML Webpack Extra Tags Plugin

Extract CSS、js to the specified file

Install Stable

  npm i --save-dev html-webpack-extra-tags-plugin

  yarn add --dev html-webpack-extra-tags-plugin

Usage

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackExtraTagsPlugin = require('html-webpack-extra-tags-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackExtraTagsPlugin(),
  ]
}

This will generate a file dist/webpack-css.html,webpack-js.html containing the following

    <link href="xxx.css"></link>

    <script src="bundle.js"></script>

Usage

Name	Type	Default	Description
outputPath	{String}	./	set output path

eg:

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackExtraTagsPlugin({ outputPath: path.resolve(__dirname, 'xxxx') }),
  ]
}