スタイルシートを分離するプラグイン

これまでは、スタイルシートはHTML内のヘッダー内に記述されてきました。

ファイルを分けて分離させたいときは、「mini-css-extract-plugin」というプラグインを使っていきます。

インストールしていきます。

npm info mini-css-extract-plugin
npm i -D mini-css-extract-plugin@0.8.0

webpack.config.jsを編集

webpack.config.jsを編集します。

requireでプラグインを読み込んで、plugins:の配列に記述します。

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //プラグインを読込

const outputPath = path.resolve(__dirname,'dist')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:outputPath
    },
    module:{
      rules:[
          {
              test:/\.(sc|c)ss$/,
              use:
              [
                  MiniCssExtractPlugin.loader, //style-loaderの代わりにMiniCssExtractPluginのloaderを追記
                  'css-loader',
                  'sass-loader'
              ]
          }
      ]
    },
    "devServer": {
        contentBase:outputPath
    },
    // プラグインに追加
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[hash].css'
        })
    ]
    op
}

「filename: ‘[name].[hash].css’」の[name]にはmain、[hash]には適当なハッシュ値が入ります。

ハッシュ値はキャッシュ対策として入れます。

ビルドする

それでは、ビルドしてcssファイルが生成されるが確認します。

以下のコマンドを入力して実行

npx webpack --mode development

そうすると、distディレクトリの中にcssファイルが出力されていると思います。

ファイル名にもハッシュ値が付与されていることが確認できればOKです。

CSSファイルを圧縮するには？

CSSファイルを圧縮するには「optimize-css-assets-webpack-plugin」というプラグインを使っていきます。

インスールします。

npm i -D optimize-css-assets-webpack-plugin

webpack.config.jsを編集

webpack.config.jsを編集します。

以下のように、

const OptimizeCssAssetsPluginと、optimization:のところに追記してあげます。

const path = require('path')
const MiniCssExractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
//インストールしたプラグインを取り込む
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

const outputPath = path.resolve(__dirname,'dist')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:outputPath
    },
    module:{
      rules:[
          {
              test:/\.(sc|c)ss$/,
              use:
              [
                MiniCssExractPlugin.loader,
                'css-loader',
                'sass-loader'
              ]
          },
          {
            test:/\.html$/,
            loader:'html-loader'
          }
      ]
    },
    devServer: {
        contentBase:outputPath
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html'
        }),
        new MiniCssExractPlugin({
            filename:'[name].[hash].css'
        })
    ],
    //optimizationに追記
    optimization:{
        minimizer:[
            new OptimizeCssAssetsPlugin({})
        ]
    }
}

設定が終わったらビルドして確認します。

ビルドするときは、productionモードでビルドしてあげます。

npx webpack --mode production

そうすると、distディレクトリに圧縮されたcssファイルが生成できています。

まとめ

webpackでcssファイルを別出力する&圧縮する方法は以上です。

Babelの導入ついてです。

webpackのBabelの設定についは以下の公式サイトでも解説があります。

Babel

babeljs.io

飛び先で「webpack」を選択すれば手順がみれます。

Babelとは

Babelはトランスパイラというツールで、バージョンが新しいJavaScript（ES6など）の場合、新しい記法で書いたときにそれに対応していないブラウザだと、うまく動作しません。

Babelは、そんなモダンなJavaScriptの記法でも対応できるように変換してくれるツールです。

必要なものをインスールしていく

最新版を確認し、以下の3つをインストールします。

npm i -D babel-loader @babel/core @babel/preset-env

.babelrcを作成

先ほどインストールした@babel/preset-envを有効するには、.babelrcが必要なので作成します。

touch .babelrc

以下のように編集。

{
  "presets": ["@babel/preset-env"]
}

webpack.config.jsの編集

以下を、module:{}のrules:[]内に追記。

以上、省略…
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
以下、省略…

それでは、npm webpackでコンパイルします。

そうすると、main.jsが更新されます。

みてみると、ES2015(ES6)で導入されたconstが、varに変換されていたりとちゃんと変換されているのが分かります。

まとめ

モダンなJavaScriptフレームワークのReactやVueは、ES2015(ES6)以降の記述で書かれているので、Babelの導入は必須になります。

とりあえず、基本的なBabelの設定は以上です。

また次に続きます↓

https://blog.pop-web.net/programming/webpack/beginner-webpack-04/

blog.pop-web.net

webpackにJavaScriptファイルをバンドルする機能以外にも様々な便利機能があります。

Loaderについて解説します。

Loader（ローダー）とは？

JavaScript以外のファイルをJavaScriptとして扱えるようにする機能です。

LoaderでCSSを扱う

css-loaderのインストール

「css-loader」でcssファイルをJavaScriptのオブジェクトとしてして扱えるようにできます。

インストールをします。

npm info css-loader //最新版の確認
npm i -D css-loader@3.2.0 //インストール

webpack.config.jsに設定を記載していきます。

ローダー登録には、moduleプロパティに以下のように書きます。

const path = require('path')

const outputPath = path.resolve(__dirname,'dist')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:outputPath
    },
    module:{
      rules:[
          {
              test:/\.css$/, //testには正規表現でcss拡張子を設定
              use:['css-loader'] //useには使用するローダーを設定
          }
      ]
    },
    devServer: {
        contentBase:outputPath
    }
}

cssファイルを作成する

touch src/style.css

以下のように編集

.bdy-color{
    background:#b3ff66;
    color: #ff1e74;
}

JavaScriptにインポートします。

index.jsへ以下のようにスタイルシートをimportさせます。

import $ from 'jquery'
import './style.css' //作成したstyle.cssをインポート

$(function () {
    $('body').prepend('<p>Hello,webpack!</p>')
})

style-loaderをインストール

これで、スタイルシートをimportさせることができたのですが、

このスタイルシートをindex.htmlに適用されるには、もうひとつローダーが必要で「style-loader」というものをインストールします。

npm info style-loader //最新版の確認
npm i -D style-loader@1.0.0 //インストール

webpack.config.jsを編集

それでは次に、webpack.config.jsのuseにstyle-loaderを追加します。

ここで、注意点としては「css-loader」の上に「style-loader」を書いて下さい。

なぜなら、ローダーは下から上に順番に実行されていくからです。

この場合、「css-loader」でstyle.cssをJavaScriptのオブジェクトとして扱えるようにしてから、「style-loader」でスタイルタグとしてそれを読み込むという順序になります。

逆にすると上手くいかないので注意です。

const path = require('path')

const outputPath = path.resolve(__dirname,'dist')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:outputPath
    },
    module:{
      rules:[
          {
              test:/\.css$/,
              use:
              [
                  'style-loader', //style-loaderを追記（※css-loaderの上に！）
                  'css-loader'
              ]
          }
      ]
    },
    devServer: {
        contentBase:outputPath
    }
}

次に、index.jsを編集します。

以下のように、bodyタグにクラス名「bdy-color」を付与させるようにします。

import $ from 'jquery'
import './style.css'

$(function () {
    $('body').prepend('<p>Hello,webpack!</p>')
})

document.body.classList.add('bdy-color') //bodyタグにクラス名「bdy-color」を付与

これで、npm run startを実行してブラウザで確認します。

CSSが適用されて背景色が緑で、文字がピンクになっていればOKです。

LoaderでSASSを扱う

sass-loaderのインストール

sassファイルをJavaScriptオブジェクトとして扱うためローダーです。

インストールします。

npm info sass-loader //最新版の確認
npm i -D sass-loader@7.2.0 //インストール

次に、sassをcssにコンパイルするためのローダーであるnode-sassインストールします。

npm info node-sass //最新版の確認
npm i -D node-sass@4.12.0 //インストール

webpack.config.jsを編集

useに「’sass-loader’」を追記します。

ここでも注意点としては、ローダーは下から上へ処理されていくので、sass-loaderは一番初めに処理させたいので、一番下に記載します。

const path = require('path')

const outputPath = path.resolve(__dirname,'dist')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:outputPath
    },
    module:{
      rules:[
          {
              test:/\.(sc|c)ss$/, //正規表現でcss、scssのどちらも適用されるように
              use:
              [
                  'style-loader',
                  'css-loader',
                  'sass-loader' //sass-loaderを追記（※一番下に記載）
              ]
          }
      ]
    },
    devServer: {
        contentBase:outputPath
    }
}

scssファイルを作成

touch src/style.scss

sassでは変数が使用できるので、

以下のように編集しておきます。

$big-font:100px;
$font-style:italic;

.bdy-color{
  font-size: $big-font;
  font-style: $font-style;
}

次に、index.jsを編集します。

index.jsへ以下のようにsassファイルをimportさせます。

import $ from 'jquery'
import './style.css'
import './style.scss' //作成したsassファイルをインポート

$(function () {
    $('body').prepend('<p>Hello,webpack!</p>')
})

document.body.classList.add('bdy-color')

それでは、npm run startをしてブラウザで確認します。

scssファイルで設定したように、文字が大きくなり斜体文字になっていればOKです。

Loaderで画像を扱う

画像を用意

srcの中に、適当に画像を用意しておきます。

src/sample.jpg

url-loaderのインストール

画像ファイルをJavaScriptオブジェクトとして扱うためローダーです。

インストールします。

npm info url-loader //最新版の確認
npm i -D url-loader@2.1.0 //インストール

次に、sassをcssにコンパイルするためのローダーであるnode-sassインストールします。

webpack.config.jsを編集

moduleのなかのrulesに追記します。

以上、省略…
            {
                test:/\.(gif|jpe?g|png|svg|ico)$/i,
                loader: 'url-loader'
            }
以下、省略…

次に、index.jsを編集していきます。

import $ from 'jquery'
import './style.css'
import './style.scss'
import photo from './sample.jpg'

$(function () {
    $('body').prepend('<p>Hello, webpack!!</p>')
})

document.body.classList.add('bdy-color')

//imgタグをbodyに挿入
const image = new Image()
image.src = photo
document.body.appendChild(image)

それでは、npm run startをしてブラウザで確認します。

画像が挿入されていればOKです。

ここで、ソースを見るとimgタグにはbase64でエンコードされた文字列データとして使用されていることが分かります。

base64でエンコードすることでサーバへのリクエストが減り表示速度が速くなる利点がありますが、

大きな画像になるほど、Base64にエンコードされた文字列は増えていくため、逆にファイルが重くなります。

そこで、base64ではなくて、通常の画像パスを読み込む形式に変えてくれる「file-loader」がローダーがあります。

file-loaderをインストール

npm info file-loader
npm i -D file-loader@4.2.0

webpack.config.jsを編集

url-loaderの設定内にoptionsを追加し、file-loaderを有効にします。

以上、省略…
            {
                test:/\.(gif|jpe?g|png|svg|ico)$/i,
                loader: 'url-loader',
                //optionsを追記
                options: {
                    limit:1024, //閾値は、1キロバイト以上に設定
                    name:'./images/[name].[ext]' //画像ファイルを分離して読込む
                }
            }
以下、省略…

limitは容量を指定して、これ以上の容量だったらnameで設定した画像パスにになるといった感じです。

LoaderでHTMLファイルを扱う

HTMLファイルをローダーで扱うには、「html-loader」を使用します。

インストールします。

npm info html-loader
npm i -D html-loader@0.5.5

次に、HTMLを生成するためのプラグインをインストールします。

npm info html-webpack-plugin
npm i -D html-loader@0.5.5

webpack.config.jsを編集

html-loaderとプラグインの設定を以下のように行います。

const path = require('path')
// プラグインの読み込み
const HtmlWebPackPlugin = require('html-webpack-plugin')

const outputPath = path.resolve(__dirname,'dist')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:outputPath
    },
    module:{
      rules:[
          {
              test:/\.(sc|c)ss$/,
              use:
              [
                  'style-loader',
                  'css-loader',
                  'sass-loader'
              ]
          },
          //html-loaderの設定
          {
            test:/\.html$/,
            loader:'html-loader'
        }
      ]
    },
    devServer: {
        contentBase:outputPath
    },
    // プラグインの設定
    plugins:[
        new HtmlWebPackPlugin({
            template:'./src/index.html',
            filename:'./index.html'
        })
    ],
    devtool:'source-map'
}

プラグインの設定では、「template」には、ひな形となるhtmlファイルの設定。

「filename」に出力時のファイル名を設定します。

テンプレートとなるhtmlファイルを作成

テンプレートとなるhtmlファイルを作成します。

touch src/index.html

以下のように編集しておきます。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello,World!</title>
</head>
<body>
</body>
</html>

これで、ビルドします。

npm run start

これで、ブラウザが起動し、「Hello,webpack!」と表示され、スタイルシートも適用されていればOKです。

LoaderでESLintを 扱う

ESLintってなにかっていうと、JavaScriptの構文チェックツールです。

導入することいによって、構文エラーをチェックしてくれるので初期段階でバグの発見することができます。

また、コードルールを統一することができるので、開発の手間を省くことできます。

ESLintをインストールします。

npm info eslint
npm i -D  eslint@6.1.0

eslint-loaderをインストールします。

npm info eslint-loader
npm info eslint-loader@2.2.1

初期化処理をします

npx eslint --init

そうすると、設定の選択をいくつかしていきます。

今回は以下のような選択をしました。

? How would you like to use ESLint?
To check syntax, find problems, and enforce code style
? What type of modules does your project use?
JavaScript modules (import/export)
? Which framework does your project use?
None of these
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
Browser
? How would you like to define a style for your project?
Use a popular style guide      
? Which style guide do you want to follow?
Airbnb (https://github.com/airbnb/javascript)
? What format do you want your config file to be in?
JSON
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:
? Would you like to install them now with npm?
Yes

初期化処理の設定が終わると、「.eslintrc.json」というファイルが出来上がっていると思います。

次に、webpack.config.jsを編集して、eslint-loaderの設定を追記します。

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')

const outputPath = path.resolve(__dirname, 'dist')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: outputPath,
  },
  module: {
    rules: [
    // eslint-loaderの設定追記、enforceは優先的にローダを実行する設定
      {
        enforce: 'pre',
        test: /js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.(sc|c)ss$/,
        use:
              [
                'style-loader',
                'css-loader',
                'sass-loader',
              ],
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
    ],
  },
  devServer: {
    contentBase: outputPath,
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html',
    }),
  ],
  devtool: 'source-map',
};

構文チェックは、他のローダーが実行される前に行いたいので、eslint-loaderの優先順位を一番にします。

そこで、「enforce: ‘pre’」という設定をします。

これは、一番初めにローダーを実行するという設定です。

次に、babel-eslintをインストールします。

これは、babelのバーサーでbabelによるトランスファイル前のJavaScriptをチェックするために必要になります。

npm i -D babel-eslint

「.eslintrc.json」でパーサーの設定します。

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "airbnb-base"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    },
    "parser":"babel-eslint" //パーサー設定を追記
}

それでは、構文チェックするためファイルを指定して、eslintを実行します。

npx eslint src/index.js

構文エラーなどがでてきたら、チェックが正常に行われていることが分かります。

自動で構文エラーをなおす場合は「–fix」のオプションをつけます。

npx eslint --fix src/index.js

再度、eslintを実行してエラーが出なくなっていればOKです。

まとめ

とりあえず。Loaderの基礎については以上です。

次に続きます↓

https://blog.pop-web.net/programming/webpack/beginner-webpack-03/

blog.pop-web.net

webpackって？

フロントエンド開発の現場において使用されており、作業の効率化を目的として「モジュールバンドラー」と呼ばれる便利ツール。

モジュールバンドラーって？

CSS、JavaScript、画像といったアセットファイルをJavaScriptのモジュールに変換して合体させるものです。

module（モジュール）は「部品」で、bundle（バンドル）は「束ねる」という意味。

webpackの他にも、browserify、RequireJS、rollup.jsといったモジュールハンドラーが存在しますが、webpackがモジュールハンドラーの中で一番人気なので、とりあえずwebpackを知っとけばOKという感じです。

モジュール化して統合させるのってなんで？

webサイトでは、CSS、JavaScript、画像といった必要なファイルが増えるにつれて、サーバーになんどもリクエストしなければならなくなります。

そうなると、画面表示をするためにコストがかかり表示速度が遅くなってしまいます。

そこで、webpackの登場。

webpackは、様々なアセットファイル（JavaScript、CSS、画像など）を1つのファイルに統合してくれるため、サーバーへのリクエスト数も減らせるわけです。

しかも、単に統合させるだけでなく依存関係を解決してから統合してくれます。

事前に必要なもの

• Node.jsが必要【LTS(Long Time Support)が推奨】

公式サイトへ行って、「推奨版」てやつをダウンロードしておけばOK。

webpackインストールの準備

webpackをインストールするための準備をします。

プロジェクトフォルダを作成して、npmの初期化処理をしておきます。

mkdir webpack-test
npm init -y

webpackのインストール

最新バージョンを確認

npm info webpack

「latest:〇〇〇」と書かれているところが最新版なので、それをインストールします。

webpackの後に@マークを足して、そのあとにバージョンを書きます。

 npm i -D webpack@4.39.1

「i」は、installの省略で、「-D」は–save-devの省略です。

開発環境のみ使用するパッケージの場合は、「-D」（–save-dev）オプションを付けます。

つづて、コマンドラインからwebpackを利用するためのパッケージである「webpack-cli」もインストールします。

同様に、最新パージョンを確認してインストールします。

npm info wepack-cli

npm i -D webpack-cli@3.3.6

package.jsonを確認してみます。

  "devDependencies": {
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  }

devDependenciesに、webpackとwebpack-cliがあればOK。

ディレクトリを作成する

次に、バンドルする前のソースファイルを置くsrcディレクトリと、バンドルされて吐き出されるdistディレクトを作成しておきます。

mkdir src
mkdir dist

index.htmlを作成

distディレクトリにindex.htmlを作成しておきます。

touch dist/index.html

index.htmlのソースは以下のように適当でOK。

あとで、バンドルされて生成されるmain.jsをここで読み込んでおきます。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello,World!</title>
</head>
<body>
    Hello,World!
    <script src="main.js"></script>
</body>
</html>

JavaScriptを作成

srcディレクトリにindex.jsを作成します。

touch src/index.js

今回は、jQueryを使用してスクリプトを作っていこうと思うので、

npmでjQueryをインストールします。最新版を確認したらそれをインストールします。

npm info jquery

npm i -S jquery@3.4.1

「-S」は、–saveの省略です。jQueryは開発環境だけでなく、本番環境でも必要なパッケージなのでこのようにします。

index.jsにjQueryをインポートしてjQueryのスクリプトを書いていきます。

以下のように書いてみました。

bodyタグの中にpタグをを挿入して「Hello, webpack!!」という文字を出力するjQueryのスクリプトです。

import $ from 'jquery'

$(function () {
    $('body').prepend('<p>Hello, webpack!!</p>')
})

webpackでバンドルを実行

webpackコマンドを実行して、バンドルしていきます。

以下のようにコマンドを入力してwebpackを実行します。

npx webpack --mode development

「 –mode development」のオプションは、モードオプションを設定する必要があり、今回は開発中ということで「development」を指定します。

本番環境の場合は、「–mode production」とします。

distディレクトリを確認してみてください。

main.jsが生成されているのが分かると思います。

ブラウザで確認

それでは、index.htmlをブラウザで開いて確認します。

「Hello, webpack!!」と表示されればOKです。

これからわかるように、jQueryのライブラリと自分で書いたindex.jsとが合体してmain.jsになったということが分かると思います。

webpack.config.jsの作成と設定

npx webpackを実行すると、srcディレクトリのjsファイルをバンドルして、distディレクトリにmain.jsとして出力するという流れになっていました。

こういった、どこのファイルをバンドルして、どこへ出力するのかを設定する設定ファイルが「webpack.config.js」というものです。

entryとoutputの設定

「webpack.config.js」を作成して編集します。

touch webpack.config.js

以下のように編集します。

const path = require('path') //現在のパスを変数へ

const outputPath = path.resolve(__dirname,'dist') //distまでの絶対パスの生成

module.exports = {
    entry:'./src/index.js', //バンドルする対象ファイルの指定
    output:{
        filename:'main.js', //バンドルされたファイル名の指定
        path:outputPath //バンドルされたファイルを出力する場所の指定
    }
}

コードの意味はコメントアウトで書いた通りです。

編集したら、再度webpackを実行してバンドルされていることを確認しておきます。

npx webpack --mode development

コマンドを実行する同じ階層に「webpack.config.js」がなく、他の階層にある場合、オプションを付けてパス指定で実行することができます。

npx webpack --mode development --config (path)/webpack.config.js

ライブサーバのパッケージで快適に

ファイルの更新されたら自動リロードしてくれる「webpack-dev-server」をインストールします。

最新版を確認してからインストールします。

npm info webpack-dev-server
npm i -D webpack-dev-server@3.7.2

それでは、実行します。

npx webpack-dev-server

http://localhost:8080/へアクセスしてください。

そしてdistをクリックしてindex.htmlの表示を確認してください。

注意点としては、webpack-dev-server起動中にファイルが変更されると自動リロードされて更新されますが、

dist内のファイルへのビルドはされないで、適宜、npx webpackでビルドする必要があります。

ドキュメントルートを変更したい場合

今の状態だと「/dist」にアクセスしないとindex.htmlは表示できません。

http://localhost:8080/でindex.htmlを表示されるようにするには、webpack.config.jsを編集すればできます。

webpack.config.jsへ、以下のようにdevServerプロパティを追記をしましょう。

const path = require('path')

const outputPath = path.resolve(__dirname,'dist')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:outputPath
    },
    devServer: {
        contentBase:outputPath //内部サーバーのドキュメントルートをdistディレクリに設定
    }
}

設定し終わったら、再度npx webpack-dev-serverを実行してブラウザでindex.htmlがhttp://localhost:8080/で確認できることを確認しておきましょう。

package.jsonのタスクの登録で快適に

package.jsonにタスク登録というものをしておくことで、より効率的に開発が行えるようになります。

package.jsonの「”scripts”:」のところを以下のように編集しておきます。

  "scripts": {
    "start": "npx webpack-dev-server --open"
  },
  以下省略・・・

このように登録しておくことで、npm run 〇〇という形でツールを実行することができます.

では、実際に実行します。

npm run start

同様に、内部サーバーが立ち上がっていることを確認してください。

ちなみに、「–open」のオプションを付けることで、自動でブラウザを起動してくれます。

ソースマップの作成

コードにエラーがあった時に、ブラウザ上からどこでエラーが発生しているか分かりやすくするためにソースマップの作成を行います。

webpack.config.jsを編集します。

devtool:source-mapを追記します。

const path = require('path')

const outputPath = path.resolve(__dirname,'dist')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:outputPath
    },
    devServer: {
        contentBase:outputPath
    },
    devtool:'source-map' //ここに追記
}

これで、エラーなどをブラウザ上で確認する際には、ビルド前のファイルの状態で確認することができるようになり、開発がしやすくなります。

まとめ

とりあえず、webpackの基本的な機能は以上です。

次に続きます↓

【初心者向け】webpackとは？使い方を解説②-Loader設定

前回の記事の第2弾です。webpackにJavaScriptファイルをバンドルする機能以外にも様々な便利機能があります。Loaderについて解説します。 Loader（ローダー）とは？JavaScript以外のファイルをJavaScript...

blog.popweb.dev

2019.08.10