1分でできるcommon-config-webpack-pluginによるwebpack環境構築

webpack環境構築

webpack環境構築は慣れていないと難しいが、この記事に記載したcommon-config-webpack-pluginなどをインストールしたやり方だと初心者でも簡単にwebpack環境構築ができる。

1. 適当なフォルダを作成してcdで移動

mkdir my-webpack && cd my-webpack

2. webpackおよびプラグインをインストール

npm init -y
npm i -D webpack webpack-cli common-config-webpack-plugin html-webpack-plugin webpack-dev-server

3. webpack.config.jsを作成

webpack.config.jsを作成。中身は以下の通り。

const CommonConfigWebpackPlugin = require('common-config-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new CommonConfigWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: "./index.html"
    })
  ]
}

4. srcディレクトリを作成

srcディレクトリを作成して中にindex.scssとindex.tsを入れる。

mkdir src && touch src/index.scss && touch src/index.ts && touch index.html

SCSSファイルを読み込む際はtsファイルにimportを記述して読み込む。

webpack-dev-serverを実行時はjsファイルしか読み込まないが、ビルド時はcssとjsでファイルが分離してdistディレクトリに書き出されてindex.html内でlinkとscriptタグでそれぞれ読み込むようになっている。

import "./index.scss"

console.log('sample')

以上の手順でwebpack-dev-serverを実行でブラウザ確認、npx webpackでビルドができるようになる。

# http://localhost:8080/ でブラウザ確認
webpack-dev-server

# ビルド
npx webpack

webpack-dev-serverを実行中はwatch(監視)状態なのでHTMLやSCSSファイルなどを修正すれば、コンパイルされてホットリロードによりブラウザも更新されてすぐに確認可能だ。