Edited at

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

More than 1 year has passed since last update.

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

 

作りかけのポートフォリオ

静的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

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

スクリーンショット 2018-02-28 3.29.52.png

スクリーンショット 2018-02-28 4.35.57.png


Webサイトにアクセス

http://localhost:8080/

スクリーンショット 2018-02-28 4.11.13.png

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