webpackでプロジェクト作成（出力管理）
Getting Started
Asset Management
Output Management (←今回はコレ)
Development
Webpack公式のOutput managementを学ぶ。
- JSファイル内のコマンドの読み込み
- HtmlWebpackPlugin
- clean-webpack-plugin
まずは、エントリーポイントを複数設置して、複数ファイルからindex.htmlに出力する方法を確認する。
## メソッドの作成 srcディレクトリ配下にindex.js以外にprint.jsファイルを作成する。
src/print.js
export default function printMe() {
console.log('I get called from print.js!');
}
コンソールにコメントを出力するコマンドを記述。
## src/index.js index.jsにprint.jsをインポートする。 ボタンをクリックすると、インポートしたprint.jsを実行するプログラムを記述する。
src/print.js
import _ from 'lodash';
import printMe from './print.js';
function component() {
const element = document.createElement('div');
const btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
## index.htmlの編集 index.htmlに出力用のタグを記述する。 使用するタグは２つ。print.bundle.jsとapp.bundle.js。 この２つのファイルは現状では存在していない。 configファイルで指定した名前で出力するよう記述し、webpackを実行することでファイルが作成される。
<!doctype html>
<html>
<head>
<title>Asset Management</title>
<title>Output Management</title>
<script src="./print.bundle.js"></script>
</head>
<body>
<script src="./app.bundle.js"></script>
</body>
</html>
## configファイルの編集 エントリーポイントとして、srcの２つのファイルを設定し、各ファイルにつけた名称でdist配下に出力ファイルを作成するよう設定する。
webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
## webpackを再読み込み `npm build run`で再読み込みを実行する。
$npm build run
Asset Size Chunks Chunk Names
app.bundle.js 72.6 KiB 0, 1 [emitted] app
print.bundle.js 1.02 KiB 1 [emitted] print
Entrypoint app = app.bundle.js
Entrypoint print = print.bundle.js
先ほど設定したファイルをエントリーポイントとして出力ファイルが作成される。
dist/index.htmlを開くとボタンが表示され、クリックするとプログラムが実行される。
メモ：出力までの流れ
- src配下に元となるファイルを作成する
- index.jsにimportし、ブラウザ表示用のタグを記述する
- configファイルでエントリーポイントに指定し、出力名を指定する
- dist/index.html配下に出力用のタグを設置する
## HtmlWebpackPlugin HtmlWebpackPluginを使うと、configのoutputを読み取って、その表示用タグを含んだindex.htmlを自動作成してくれる。
※ただし、既存でdist/index.htmlがある場合は上書きされるので注意。
## プラグインのインストール
npm install --save-dev html-webpack-plugin
## configファイルの設定
webpack.config.js
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
## clean-webpack-plugin clean-webpack-pluginを使うことで/dist配下をきれいに保つことができる。
これがないと、使われてないファイルも/dist配下に残っていくが、これがあれば、使うファイル以外は自動で削除してくれる。
npm install --save-dev clean-webpack-plugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js',
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};