👋
webpackというものを触ってみる - その他
はじめに
前回の記事からの続きです。
環境
- windows10 (wsl2)
- node(v16.18.0)
- yarn(1.22.19)
ディレクトリ構成やファイルの内容は前回の最後から引き続きです。
CSSを別ファイルに出力
CSSをJsファイルに含めたのですが、やはりCSSは別ファイルに独立していたほうが…という気が個人的にあるので、別ファイルに出力する様にします。
mini-css-extract-pluginというツールを利用します。
$ yarn add -D mini-css-extract-plugin
./webpackc.config.js を編集します。
./webpack.config.js
// モード
// development:ソースマップが有効
// production:コード圧縮
const MODE = "development";
// "development"の場合のみソースマップ有効
const enabledSourceMap = MODE === "development";
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: MODE,
devtool: "source-map",
// エントリーポイントのJs
entry: `./src/index.js`,
// コンパイルした結果を出力する先の設定
output: {
path: `${__dirname}/dist`,
filename: `main.js`
},
// webpack-dev-serverの設定
devServer: {
static: "dist", // 公開するルートディレクトリ
open: true, // サーバー起動後自動でブラウザ立ち上げ
// port: 8081 // ポートを指定したい場合に記述。 デフォルトは8080。
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
// Babelの設定
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env"
]
}
}
]
},
{
// CSSの設定
test: /\.css/,
use: [
- "style-loader",
+ // "style-loader",
+ // CSSファイル別出力
+ MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: false,
sourceMap: enabledSourceMap
},
},
"postcss-loader",
]
}
]
},
+ plugins: [
+ new MiniCssExtractPlugin({
+ // CSSファイルの出力先指定
+ filename: "css/[name].css"
+ })
+ ],
// ES5(IE11等)向けにコンパイルする設定
target: ["web", "es5"]
}
style-loader を利用しなくなるので、CSSファイルを読み込むようにHTMLを修正します。
./dist/index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<script src="./main.js"></script>
+ <link rel="stylesheet" href="./css/main.css">
</head>
<body>
<h1 class="text-3xl font-bold underline">webpackというものを触ってみる。</h1>
<hr>
<button id="btn-alert">show alert</button>
<input type="text" name="message" id="message">
<button class="btn">hoge</button>
</body>
</html>
これでコンパイルすると ./dist/css/main.css に出力されました。
HTMLに自動でタグを埋め込む
これまで ./dist/index.html を編集していましたが、コンパイルして生成されるファイルが配置されるディレクトリに手で編集するファイルがあるのって気持ち悪い気がするので、src配下でHTMLを編集してjsとかcssとかと同様にコンパイルした時に ./dist/ 配下に配置される様にします。
html-webpack-pluginというツールを利用する様です。
# インストール
$ yarn add -D html-webpack-plugin
./dist/index.htmlを ./src/ の配下に移動してjsとcssとの読み込みを削除します。
./src/index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
- <script src="./main.js"></script>
- <link rel="stylesheet" href="./css/main.css">
</head>
<body>
<h1 class="text-3xl font-bold underline">webpackというものを触ってみる。</h1>
<hr>
<button id="btn-alert">show alert</button>
<input type="text" name="message" id="message">
<button class="btn">hoge</button>
</body>
</html>
./webpack.config.js に設定を追加します。
./webpack.config.js
// モード
// development:ソースマップが有効
// production:コード圧縮
const MODE = "development";
// "development"の場合のみソースマップ有効
const enabledSourceMap = MODE === "development";
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+ const HtmlWebpackPlugin = require("html-webpack-plugin");
+ const path = require("path");
module.exports = {
mode: MODE,
devtool: "source-map",
// エントリーポイントのJs
entry: `./src/index.js`,
// コンパイルした結果を出力する先の設定
output: {
path: `${__dirname}/dist`,
filename: `main.js`
},
// webpack-dev-serverの設定
devServer: {
static: "dist", // 公開するルートディレクトリ
open: true, // サーバー起動後自動でブラウザ立ち上げ
// port: 8081 // ポートを指定したい場合に記述。 デフォルトは8080。
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
// Babelの設定
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env"
]
}
}
]
},
{
// CSSの設定
test: /\.css/,
use: [
// "style-loader",
// CSSファイル別出力
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: false,
sourceMap: enabledSourceMap
},
},
"postcss-loader",
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// CSSファイルの出力先指定
filename: "css/[name].css"
}),
+ new HtmlWebpackPlugin({
+ // ./src/index.htmlを指定。
+ template: path.resolve(__dirname, "src", "index.html"),
+ // 出力ファイル名
+ filename: "index.html"
+ })
],
// ES5(IE11等)向けにコンパイルする設定
target: ["web", "es5"]
}
これでコンパイルすると ./src/index.html も併せて ./dist/ 配下に作成されます。
さらにjsとcssとを読み込むタグも埋め込まれます。
./dist/ 配下をコンパイル時にまずクリーンする
./dist/ 配下にコンパイルすると色々とファイルが作成されますが、もともと存在していたファイルはそのまま残ります。
コンパイル時に毎回きれいにしたい場合はclean-webpack-pluginというツールを使う様です。
# インストール
$ yarn add -D clean-webpack-plugin
./webpack.config.js に設定を記述します。
./webpack.config.js
// モード
// development:ソースマップが有効
// production:コード圧縮
const MODE = "development";
// "development"の場合のみソースマップ有効
const enabledSourceMap = MODE === "development";
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
+ const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");
module.exports = {
mode: MODE,
devtool: "source-map",
// エントリーポイントのJs
entry: `./src/index.js`,
// コンパイルした結果を出力する先の設定
output: {
path: `${__dirname}/dist`,
filename: `main.js`
},
// webpack-dev-serverの設定
devServer: {
static: "dist", // 公開するルートディレクトリ
open: true, // サーバー起動後自動でブラウザ立ち上げ
// port: 8081 // ポートを指定したい場合に記述。 デフォルトは8080。
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
// Babelの設定
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env"
]
}
}
]
},
{
// CSSの設定
test: /\.css/,
use: [
// "style-loader",
// CSSファイル別出力
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: false,
sourceMap: enabledSourceMap
},
},
"postcss-loader",
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// CSSファイルの出力先指定
filename: "css/[name].css"
}),
new HtmlWebpackPlugin({
// ./src/index.htmlを指定。
template: path.resolve(__dirname, "src", "index.html"),
// 出力ファイル名
filename: "index.html"
}),
+ new CleanWebpackPlugin()
],
// ES5(IE11等)向けにコンパイルする設定
target: ["web", "es5"]
}
これでコンパイルを行うと ./dist/ 配下が一旦クリーンされてからファイルが配置されます。
おわりに
まだまだほんの少ししか触れていないので、色々試して行きたいと思います。
ただ、webpackももう古くて、今どきはViteというのが新しい様子です。
またViteというのも触ってみたいと思います。
Discussion