Node.js/webpack/Plugin/html-webpack-plugin

webpack で作ったコードをブラウザで簡易的に確認できるように指定した HTML に対してその script タグを突っ込んでくれる。プロダクトとしてはなんの意味もなく、単なる開発の手間を一つ減らすだけのプラグイン。

Install

$ npm install --save-dev html-webpack-plugin

設定

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
    entry: "./src/hoge.js",
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "./src/hoge.html")
        })
    ]
};

使う

このような HTML を用意する。↑の設定で hoge.html と設定しているファイルがこのファイルになる。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>hoge</title>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>    
</body>
</html>

webpack 実行すると、このようなソースコードが吐き出される。 body 直前に webpack で作った JS ファイルが読み込まれるタグが挿入されてこれを開けばすぐ確認できる状態になったということ

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>hoge</title>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>    
<script type="text/javascript" src="main.js"></script></body>
</html>

javascript/nodejs/webpack/plugin/html_webpack_plugin.txt · 最終更新: 2018-11-28 19:09 by ore

文書の先頭へ

Node.js/webpack/Plugin/html-webpack-plugin

menu

書いてる野郎

Node.js/webpack/Plugin/html-webpack-plugin

Install

設定

使う