Webpack4 + Babel を使用して .js .css ファイルを require できるようにする

Webpack4 + Babel を使用して IE11 での動作を確認する。

● webpackのインストール

ローカルにインストールします( サイズはさほど大きくなく、46MB 程度なので複数のローカル環境に入れてもあまりディスクの負担になりません)

webpackwebpack-cliwebpack-dev-serverをインストールする

cd YOUR-PROJECT-FOLDER
npm install webpack webpack-cli webpack-dev-server -D
npm init -y

なお、オプションの -D は --save-dev と同じです
https://docs.npmjs.com/misc/config

● ソースファイルを用意する

./src/index.js

import {hellowebpack} from './f';
hellowebpack();

./src/f.js

export function hellowebpack() {
  alert('hellowebpack!!!');
}

● webpacのビルドの実行

npx webpack

./dist/main.js が以下のような内容で作成されます

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),alert("helloメソッドが実行された。")}]);

javascriptのコードが圧縮されています。
これは 「 mode: 'production' 」な本番仕様です。
開発環境では圧縮しない 「 mode: 'development' 」を使用することでコンパイル時間を圧倒的に短縮することができます。
( ↓ やり方はこの後で)

● index.htmlを作成し、表示させる

1. index.html の作成

./dist/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>webpack test</title>
	<script src="./main.js"></script>
</head>
<body>
</body>
</html>

2. webpack.config.js の作成

mode: 'development' の記述はここに行います。

module.exports = {
    mode: 'development',	// (development: 開発   production: 本番)
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: 'main.js'
    },
    devServer: {
        contentBase: 'dist',
        open: true
    }
};

3. npx webpack-dev-server で サーバを起動する

npx webpack-dev-server

これでサーバが起動し、自動的に ./dist/index.html を読み込んで「hellowebpack!!!」アラートが表示されれば成功です。

● ファイル変更時の自動更新を確認する

webpack-dev-serverを起動しておくと、対象ファイルが更新された時に自動でリコンパイルがかかります。 それを確認してみます。

./src/f.js を以下のように変更して保存する

export function hellowebpack() {
  alert('hellowebpack!!! 変更しました。');
}

ブラウザに切り替えて、自動的に更新されていることを確認します。
自動更新機能は便利ですね!

● 本番サーバへファイルをアップロードして動作を確認する

「control + c 」で webpack-dev-serverを終了してから webpack ビルドを行う。

npx webpack

./dist/ 以下の全てのファイルを本番WEBサーバへアップロードして表示させて確認します。

● webpack で js 以外に css も読み込めるようにする

webpack ではデフォルトでは js しか読み込めません。 css を読み込むようにするには

style-loader css-loader をインストールする

npm i -D style-loader css-loader

webpack.config.js の設定項目の一番下に以下を追加します。

 module: {
      rules: [
        {
          test: /\.css/,
          use: [
            'style-loader',
            {loader: 'css-loader', options: {url: false}},
          ],
        },
      ]
    }

引用: https://goo.gl/QhDqE9

● babelを使ってIE11でも表示ができるようにする

ES6で書いたJavaScriptは IE11 では使えないので babel をwebpackから呼び出してIE11でも使える状態でコンパイルします

1. ./src/Myclass.js ファイルの追加

./src/Myclass.js

export class Myclass {
  constructor(id,userName) {
	this.id       = id;
	this.userName = userName;
  }
  alertUserName() {
  	alert(this.userName);
  }
}

2. ./src/index.js ファイルの変更

./src/Myclass.js

import {hellowebpack} from './f';
import {Myclass} from './Myclass.js';

hellowebpack();

var m = new Myclass(1, 'DOWN TOWN');
m.alertUserName();

3. babel のインストール

npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-env

webpackと合わせると 70MB くらいになります

4. webpack.config.js の設定変更

下記のように書き換えます。

module.exports = {
    mode: 'production', // development or production
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: 'main.js'
    },
    devServer: {
        contentBase: 'dist',
        open: true
    } ,
    module: {
        rules: [{
            test: /\.js$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env',
                    ]
                }
            }]
        }]
    }
};

5. webpackのビルドの実行

npx webpack

6. IE11 ブラウザでの確認

本番サーバへアップロードして IE11で確認します。

No.1314
01/05 21:36

edit