Node.jsのインストール
macなら便利なツール「nvm」がある
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
・nvm --version
で確認
※zsh: command not found: nvmと出る場合
・touch ~/.zshrc
を実行(新規ファイルを作成します)
・もう一度 curl コマンドを実行
・ターミナルを再起動
・nvm --version
で確認
nvm ls-remote
バージョンがずらーっと出てくる
Latest LTSが安定版
インストールする
nvm install 12.18.3
確認する
nvm ls
node --version
Webpackインストール
mkdir ~/project/webpack
cd ~/project/webpack
npm init
いくつか項目を聞かれるのでenterで最後yes
lsでみるとpackage.jsonがはいっている
これをエディタで開く※僕はVScode
code .
.で今いるディレクトリを開ける
でpackage.jsonファイルを開き
licenseを書き換え、privateを追加
//package.json
"license": "UNLICENSED",
"private": true
npm view webpack
これでwebpackの最新版がいくつあるかを確認できる
npm install --save-dev webpack@バージョン
すると
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "webpack" under a package
npm ERR! also called "webpack". Did you name your project the same
こんなエラーがでるのでpackage.jsonのnameのwebpackを変更する
で、もう一度
npm install --save-dev webpack@バージョン
package.jsonが変更され、新たなフォルダやファイルも作成されている
次にwebpack-cliを確認
npm view webpack-cli
latest:〇〇○をコピーする
npm install --save-dev webpack-cli@〇〇〇
これで準備オーケー。
※オプションコマンド補足
–save-devとは
開発用にパッケージをインストールできるようになる
–saveとは
“devDependencies”の中に”webpack-cli”:”〇〇〇”が入る
これを使うとnpm install プロジェクト名 のコマンドでインストール出来るようになる。
-gとは
グローバルにインストール
しかし、グローバルにインストールするとバージョンのコンフリクトが起こる可能性がある為、プロジェクトごとにインストールするのが推奨されている。
Webpackの設定ファイル
webpack.config.jsのファイルを作る
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
}
}
path.resolveで絶対パス取得、__dirnameは現在のフォルダの階層を意味している。
npx webpack --mode development
成功
の流れ
CSSを読み込む
npm view css-loader
npm install --save-dev css-loader@4.2.2
@はlatestのバージョン
package.jsonに”css-loader”: “^4.2.2″が記載されてればオーケー
次にwebpack.config.jsファイルをいじる
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js'
},
module: {
rules: {
test: /\.css/,
use: [
{
loader: 'css-loader'
}
]
}
}
}
module:{}を新たに追加。
.cssファイルが見つかればloaderを使ってくれという意味
npx webpack --mode development
実行〜
次に読み込んだcssをブラウザに反映されるようにする。
npm view style-loader
npm install --save-dev style-loader@1.2.1
@はlatest:のバージョン
package.json確認して”style-loader”: “^バージョン”があればオーケー
次にstyle-loaderの設定
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
webpack.config.[JavaScript]のuse:[]内にstyle-loaderを加える。
この際、読み込みは下から行われるのでcss-loaderから読み込みされる。
npx webpack --mode development
css読み込みされてるかブラウザで確認
open -a "Google Chrome" ./dist/index.html
gitにcommit
git status
git add .
git status
git commit
メッセージ追加
git log
git push //初回のcommitではgit push -u origin master
CSSを別ファイルに出力するプラグイン
npm view mini-css-extract-plugin
latest:〇〇と最新版がでる
npm install --save-dev mini-css-extract-plugin@〇〇
package.jsonにmini-css-extractがあればオーケー
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.css/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
],
},
],
},
plugins:[
new MiniCssExtractPlugin(),
],
}
npx webpack --mode development
HTMLを自動生成するプラグイン
npm view html-webpack-plugin
latest:〇〇確認
npm install --save-dev html-webpack-plugin@〇〇
package.jsonにhtml-webpack-pluginがあるか確認
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.css/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
],
},
],
},
plugins:[
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin(),
],
}
npx webpack --mode development
index.html
main.css
main.js
の3つのファイルが出来る
webpack.config.jsのpluginsを以下に変更
plugins:[
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
以下を実行
npx webpack --mode development