くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

【小ネタ】webpackでhtmlも扱う

webpack front-end 小ネタ

webpackでhtmlも出力したかったので、その時のメモ。

html-webpack-pluginとhtml-loaderを使えばOK

ディレクトリ構成はこんな感じ。

.
├── src
│   ├── html
│   │   └── index.html
│   └── index.js
│
└── dist
    ├── js
    │   └── main.js
    └── index.html

インストール

$ npm install --save -D html-webpack-plugin html-loader

webpack.config.jsの設定

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports  = {
  entry:  `./src/index.js`,
  output: {
    path:  `${__dirname}/dist/js`,
    filename:  "main.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        loader:  "html-loader"
      }
    ]
  },
  plugins: [
    new  HtmlWebpackPlugin({
      template:  "src/html/index.html",
      filename:  '../../index.html'
    })
  ],

参考にしたサイト様