この度サイト制作でWebpackを導入したので、そちらの方法を共有しようと思います。
最終的にやりたかったことは、srcフォルダ内のjsとscssファイルをassetsフォルダにコンパイルしてまとめるということです。（CSSは別ファイルとしてまとめる）
Webpackの基礎
Webpackとは？
webpack は JavaScript などの依存関係のあるリソース（モジュール）を適切に1つのファイルにまとめてくれるツール（モジュールバンドラー）です。JavaScript ファイル以外にも cssファイルや画像ファイルなどもまとめることができます。
webpackを使ってみる
下記のような形でsrc内フォルダのindex.jsを、distフォルダのmain.jsに出力する形です。
- node.jsのインストール
- npm セットアップ
- webpackインストール
- webpack.config.js編集
- package.json編集
- 実際のファイルを作成
- 実行
①node.jsのインストール
事前にnode.jsをインストールしておきます。
公式: https://nodejs.org/ja/
②npm セットアップ
プロジェクトフォルダ内で下記コマンド
$ npm init -y
③webpackインストール
$ npm i -D webpack webpack-cli
④webpack.config.js編集
// 基礎的な書き方
const path = require('path');
module.exports = {
// モードの設定
mode: 'development',
// エントリーポイントの設定(作業ディレクトリからの相対パス)
entry: path.join(__dirname, 'src', 'index.js'),
// ファイルの出力設定
output: {
// 出力するファイル名
filename: "main.js",
// 出力先のパス
path: path.join(__dirname, 'dist')
}
};
⑤package.json編集
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// ここから追加
"build": "webpack --mode development",
"prod": "webpack --mode production",
"dev": "webpack --mode development --watch",
// ここまで追加
},
...
}
⑥実際のファイルを作成
プロジェクトフォルダ内に、srcフォルダと、その中にindex.jsを作成
⑦実行
モード: developmentで実行の場合
$ npm run build
他、productionモードの時は ‘npm run prod’、watchモードの時は、’npm run dev’になります。
実行結果として、distフォルダにmain.jsファイルが出力されます。
js/scssのコンパイルをしてみる（CSSは別ファイルとしてまとめる）
基礎を試してみたことで、今度は実際に下記のような形でやってみたいと思います。
- node.jsのインストール / npm セットアップ / webpackインストール
- 必要なパッケージのインストール
- webpack.config.js編集
- postcss.config.jsの作成
- package.json編集
- 実際のファイルを作成
- 実行
①node.jsのインストール / npm セットアップ / webpackインストール
基礎編のやり方と同じです。（プロジェクトフォルダ内で実行）
$ npm init -y
$ npm i -D webpack webpack-cli
②必要なパッケージのインストール
下記パッケージをインストールします。
- css-loader
- sass-loader
- postcss-loader
- MiniCssExtractPlugin
- webpack-fix-style-only-entries
- autoprefixer
$ npm i --save-dev css-loader
$ npm i --save-dev sass-loader sass
$ npm i --save-dev postcss-loader postcss
$ npm i --save-dev mini-css-extract-plugin
$ npm i --save-dev webpack-fix-style-only-entries
$ npm i --save-dev autoprefixer
インストール後、package.jsonにパッケージがインストールされていることを確認。
③webpack.config.js編集
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
module.exports = {
// コンパイルモード
mode: 'production',
// エントリーポイントの設定
entry: {
// コンパイル対象のファイルを指定
'index': path.resolve(__dirname, "./src/js/index.js"),
'style.css': path.resolve(__dirname, './src/scss/style.scss')
},
// 出力設定
output: {
path: path.resolve(__dirname, './assets/'), // 出力先フォルダを絶対パスで指定
filename: 'js/[name].js' // [name]にはentry:で指定したキーが入る
},
module: {
rules: [
// sassのコンパイル設定
{
test: /\.(sa|sc|c)ss$/, // 対象にするファイルを指定
use: [
MiniCssExtractPlugin.loader, // JSとCSSを別々に出力する
{
loader: 'css-loader',
options: {
import: false,
url: false, //URL の解決を無効に
}
},
'postcss-loader', // オプションはpostcss.config.jsで指定
'sass-loader',
// 下から順にコンパイル処理が実行されるので、記入順序に注意
]
},
{
// Babel 用のローダー
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
]
}
}
]
}
]
},
plugins: [
new FixStyleOnlyEntriesPlugin(), // CSS別出力時の不要JSファイルを削除
new MiniCssExtractPlugin({ // CSSの出力先
filename: 'css/[name]'// 出力ファイル名を相対パスで指定（[name]にはentry:で指定したキーが入る）
})
],
// node_modules を監視（watch）対象から除外
watchOptions: {
ignored: /node_modules/
}
};
④postcss.config.jsの作成
postcss.config.jsというファイルを作成してください。自動で実行されます。
module.exports = {
plugins: [
require('autoprefixer')({ // 自動でベンダープレフィックスを付与
"overrideBrowserslist": [ // 対象ブラウザの設定
"last 2 versions",
"ie >= 11",
"Android >= 4"
]
})
]
};
⑤package.json編集
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// ここから追加
"build": "webpack --mode development",
"prod": "webpack --mode production",
"dev": "webpack --mode development --watch",
// ここまで追加
},
...
}
⑥実際のファイルを作成
srcフォルダに下記のようなファイルを作成しておきます。
assetsにコンパイル後に生成ファイルが出力されます。
また、style.scssは各scssファイルを読み込むために下記のように記述しています。
@charset "UTF-8";
// ファイル読み込み
@import "parts/a";
@import "parts/b";
⑦実行
モード: developmentで実行の場合
$ npm run build
他、productionモードの時は ‘npm run prod’、watchモードの時は、’npm run dev’になります。
実行結果として、assetsフォルダに各種ファイルが出力されます。
以上です!
