TypeScript環境設定(windows)
TypeScript環境構築について記載していきます。是非覗いていってください(^^)vWindows11+VSCodeエディターを使ってT[...]
JavaScriptとSCSSそれぞれを別ファイルにコンパイルする方法
HTML、JavaScriptとSCSSを使ってWebサイト制作を行っている人へ
webpackでjsをバンドルするとき、SCSS(CSS)も一緒に挿入される設定をしてることが多いのではないでしょうか？
私の場合、一緒にせず、JSはJSのみでファイルにバンドル、SCSSはCSSファイルにして別ファイルに書き出して運用することが多いです。
私と同じようにJSファイルとCSSファイルを分けて運用しようと思っているが、どうするの？
と思ってこのページにたどり着いた人は是非下記の内容をご活用ください。
私の備忘録としてブログに残しておきます。
JSの設定→SCSSの設定、の順に進めていきます。
今回はWindows11で解説してます。またnpmコマンドで進めていますので、yarnコマンドご使用の場合は置き換えてください。(2022年7月現在)
目次
Node.jsがインストール済みが前提です
まだの人は先にNode.jsをインストールください
hidemitsu.com/blog/418.html
まずは、制作用のフォルダを作成します
JS環境を作成
VSCodeエディターのターミナルで進めていきます
先ほど作成したフォルダ(js-basic)に移動します
|
1 |
cd js-basic |
package.jsonを作成
|
1 |
npm i --y |
npmのパッケージ情報を記述するpackage.jsonファイルが作成されます
関連パッケージのインストール
|
1 |
npm i webpack webpack-cli webpack-dev-server |
webpack：webpack 本体。複数のファイルを一つにバンドルする
webpack-cli：webpack のコマンドラインツール
webpack-dev-server：開発用のwebサーバー
srcフォルダとJSファイル2つ作成
フォルダ作成：js-basic ＞ src
ファイル1作成：js-basic ＞ src ＞ index.js
ファイル2作成：js-basic ＞ src ＞ world.js
ソースコードは下記からコピってください↓
|
1 2 3 4 |
import world from './world.js'; window.addEventListener('load',(event)=>{ world(); }); |
|
1 2 3 4 |
export default function world() { let p = document.querySelector('#target'); p.textContent = "hello world！"; } |
webpack.config.jsを作成する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const path = require('path'); module.exports = { entry: { // モジュールバンドルが最初に起動するところ bundle: './src/index.js' }, output: { // 結果を出力する場所と名前 path: path.join(__dirname,'dist'), filename: '[name].js' // [name]には「entry:」の「bundle」が入る }, resolve: { // 対象モジュールの拡張子を指定 extensions:['.js'] }, devServer: { // webpack-dev-serverの出力先フォルダ static: { directory: path.join(__dirname, "dist"), }, open: true, }, optimization: { //minify 有効：true 無効：false minimize: false }, } |
package.jsonのscriptsで囲まれた部分を修正する
|
1 2 3 4 |
"scripts": { "start": "webpack serve --mode development", "build": "webpack --mode production" }, |
mode development：コードの圧縮行わない、–mode production：コードの圧縮行う
JSの環境設定は完了です
とりあえず、お疲れ様です(^^)
コンパイルを実行します
|
1 |
npm run build |
下記にバンドルされたbuild.jsが作成されていたら、とりあえずは成功です。
フォルダ作成：js-basic ＞ dist
ファイル1作成：js-basic ＞ dist ＞ build.js
つづいてhtmlファイルを作成します
最低限のコードで作成！
ファイル作成：js-basic ＞ dist ＞ index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="ja"> <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>WebPackとJavaScript</title> </head> <body> <p id="target"></p> <script src="bundle.js"></script> </body> </html> |
ここではローカルサーバーを立ち上げる
JSの修正が即ページに反映されます。
|
1 |
npm start |
JSのみの設定はここで完了です
お疲れ様でした。(^^)
SCSS(CSS)環境を作成
ここからが、知りたいところですよね。
進めますね。
srcフォルダ配下にSCSSファイルを作成
フォルダ作成：js-basic ＞ scss
ファイル作成：js-basic ＞ scss ＞ index.scss
↓分かりやすいようにbodyの色を変数を使って赤にするだけのコードです。
|
1 2 3 4 5 |
$body-color: red; body { background-color: $body-color; } |
Babel関連パッケージのインストール(ES5への変換が必要ない場合はここは不要)
IEが廃止となったためここは不要
|
1 |
npm i -D @babel/core @babel/preset-env babel-loader |
SCSSローダーをインストール
|
1 |
npm i -D sass-loader sass css-loader |
CSSを別ファイルとして書き出すプラグインをインストール
|
1 |
npm i mini-css-extract-plugin |
「dependencies」セッションに「”mini-css-extract-plugin”: “^X.X.X”,」が追加されます
※Nodeバージョンによって、「X」の値は変更されます
webpack.config.jsをSCSSに対応(下記ですべてを上書き)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: { // モジュールバンドルが最初に起動するところ bundle: './src/index.js' }, output: { path: path.join(__dirname, 'dist'), filename: 'js/[name].js' }, devServer: { // webpack-dev-serverの出力先フォルダ static: { directory: path.join(__dirname, "dist"), }, open: true, }, optimization: { //minify 有効：true 無効：false minimize: false }, module: { rules: [ { test: /\.js$/, /* ES5への変換が必要ない場合はここは不要↓ use: [ { loader: 'babel-loader', options: { presets: [ '@babel/preset-env' ] } } ], */ exclude: /node_modules/, }, { test: /\.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { url: false, } }, { loader: 'sass-loader' } ] } ] }, plugins: [ new MiniCssExtractPlugin({ // SASSのコンパイル後のCSSファイルの出力先を指定 // 出力先フォルダはoutputで指定(dist/style.css) filename: 'css/style.css', }) ] }; |
「dist/js/bundle.js」、「dist/css/style.css」としたい場合は下記2か所を修正
index.jsをSCSSに対応(下記ですべてを上書き)
|
1 2 3 4 5 |
import '../scss/index.scss'; import world from './world.js'; window.addEventListener('load',(event)=>{ world(); }); |
index.htmlをCSSに対応(下記ですべてを上書き)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <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"> <link rel="stylesheet" href="./css/style.css"> <title>WebPackとJavaScript</title> </head> <body> <p id="target"></p> <script src="./js/bundle.js"></script> </body> </html> |
JS+SCSSの環境設定は完了です
お疲れ様でした(^^)
コンパイルを実行します
|
1 |
npm run build |
ローカルサーバーを立ち上げる
JS、SCSSの修正が即ページに反映されます。
|
1 |
npm start |
これで完了です
お疲れ様でした。(^^)
補足
ファイルを共有する場合、「node_modules」は共有せず、個人で「npm i」コマンドでインストールする↓
|
1 |
npm i |
まとめ
今回は、webpackでjsとSCSS(CSS)を別ファイルにそれぞれ出力する方法を記載しました。
webpackは、なかなか設定が複雑で、技術もすぐに新しくなるので、検索して、出てきた記事でそのまま設定しても動作しいないということも、まれにあります。
まずは、一つずつ確実に設定をしていきましょう。
今回のファイル一式をGitHubにアップしておきましたので、初期ファイルとしてご活用ください。
https://github.com/hideT-web/webpack_study.git
最後までご覧いただきましてありがとうございました(^^)/
関連記事
