Node Package Managerがインストールされていることが前提です。
初期設定をする
npm initwebpackをインストール
npm install webpack webpack-cli --save-devwebpackと そのコマンドラインのwebpack-cliをインストール
cliがないと動かないのでワンセット。
開発用なので-–save-devをつける。
なおinstallは「i」 --save-devは「-D」でもよい。
npm i -DCSSをバンドル(bundle)束ねるパッケージをインストールする。
npm install style-loader css-loader --save-devstyle-loaderはJSで読み込んだCSSを、HTMLで実行するパッケージ
css-loaderはJSにCSSを読ませるパッケージ
CSSをJSにまとめたいので両方が必要。
dist （束ねたJSが生成されるディレクトリ、自作が必要）
dist/index.html （自作するHTML）
dist/bundle.js （生成されるJS）
package.json （NodeJSの設定ファイル）
src/index.js （束ねたいCSSを指定する設定ファイル）
src/modules （束ねたいファイルを置くディレクトリ）
src/css/hoge.css （束ねたいファイル）
webpack.config.js （webpackの設定ファイル、自作が必要）index.jsに取り込むCSSの所在を書く。
import "./css/hoge.css";webpack.config.js には以下のように設定する。
module.exports = {
mode: 'development',
//mode: 'production',
module: {
rules: [
{
test: /\.css/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
url: false
}
}
]
}
]
}
};
コマンドでwebpackを実行する
npx webpackここまで実行して、正常に動くと、hoge.cssがmain.jsに取り込まれ、main.jsをHTML上読み込めばhoge.cssは不要になります。
webpackはデフォルトとしてsrc/index.jsをもとにバンドルして、dist/main.jsに出力します。
