ポートフォリオを作り始めて無料で公開する（Webpack4使ってみた）

7269 ワード
HTML JavaScript scss webpack4 ポートフォリオ HTML テキストリンク

ポートフォリオを作り始めて無料で公開する（まずは形だけ）の続きです。
　
作りかけのポートフォリオ

静的Webサイトを作るのにWebpackを使った事が無かったのですが、今更ながら使ってみました。
SPA作る時にAngular CLIを一発叩くだけで勝手に付いてくる
お得なお便利ツールだと思ってたので、自分で使い方を探った事がなかったです。
そもそも、静的Webサイトを作る機会が無かった。。。

ちょうど数日前にwebpackバージョン4がリリースされたばかりみたいです。
こだわりは無いですが、インストールしたら自動的に最新バージョンになってたので、それでやります。
v4.0.0-beta.0の変更点

Webpackでやりたかった事

・ローカルでWebサーバ起動して動作確認
　　⇨ webpack-dev-serverを利用
・jsの統合
　　⇨ webpack.config.jsの'entry'と'output'オプションで定義
・scss→cssに変換
　　⇨ style-loader css-loaderを利用し、webpack.config.jsで変換設定
　　　　※参考：webpack 4入門：スタイルシートを取り込む方法
・htmlファイルをsrc→distにコピー
　　⇨ copy-webpack-pluginを利用
・変更を検知してリビルド
　　⇨　webpack-dev-serverが勝手にやってくれる

バージョン4の変更点を少しだけ使ってみた点

・modeオプション('development' or 'production')の指定で、開発環境の時だけソースマップを有効にする

まずはnpm install

npm i -D webpack webpack-cli webpack-dev-server style-loader css-loader --save
npm i copy-webpack-plugin --save

Webpack設定ファイルを作成

webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  mode: 'development', // [v4から] development or production　
  entry: `./src/app/index.js`,
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
　　　　　　　　　　　　　　　　//SCSS⇨CSSへの変換設定
        test: /\.scss/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true,
              importLoaders: 2
            },
          },
          'sass-loader'
        ]
      }
    ]
  },
  // src配下のhtmlファイルを出力先distディレクトリに全コピー
  plugins: [
    new CopyWebpackPlugin([
      { from: './src/*.html', to: './[name].[ext]' },
    ])
  ]
};

Webpackのタスクランナーを追加

package.json
{
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
+    "start": "webpack && webpack-dev-server"
   　 ・・・・・
  },
  "devDependencies": {
    "css-loader": "^0.28.10",
    "node-sass": "^4.7.2",　　
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.9",
    "webpack-dev-server": "^3.0.0"
   　 ・・・・・
  },
  "dependencies": {
    "copy-webpack-plugin": "^4.4.2"
   　 ・・・・・
  }
}

Webpackのビルド実行＆サーバ起動

npm run start

ビルド出来てサーバも無事に動いた。。。

Webサイトにアクセス

さて、まだポートフォリオの中身をどうしよう。