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' 」を使用することでコンパイル時間を圧倒的に短縮することができます。
( ↓ やり方はこの後で)

● webpackの ソースファイルをwatchしながらビルドの実行

webpack.config.js

watch: true を追加すると watch します

module.exports = {
    ........................
    watch: true
};

● 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 = {
    devtool: 'inline-source-map' ,
    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

● webpack で js 以外に scss (sass) も読み込めるようにする こちらが今一番WEB制作的には一番現実的でしょう。

npm i -D webpack webpack-cli sass-loader sass style-loader css-loader

webpack.config.js を次のようにします。

// [定数] webpack の出力オプションを指定します
// 'production' か 'development' を指定
const MODE = "development";

// ソースマップの利用有無(productionのときはソースマップを利用しない)
const SOURCEMAP_FLAG = MODE === "development";  // true or false

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: MODE ,
  module: {
    rules: [
      {
        // 対象となるファイルの拡張子(scss)
        test: /\.scss$/,
        // Sassファイルの読み込みとコンパイル
        use: ExtractTextPlugin.extract([
          // CSSをバンドルするための機能
          {
            loader: 'css-loader',
            options: {
              // オプションでCSS内のurl()メソッドの取り込まない
              url: false,
              // ソースマップの利用有無
              sourceMap: true,
              // Sass+PostCSSの場合は2を指定
              importLoaders: 2
            },
          },
          // PostCSSのための設定
          {
            loader: 'postcss-loader',
            options: {
              // PostCSS側でもソースマップを有効にする
              sourceMap: true,
              // ベンダープレフィックスを自動付与する
              plugins: () => [require('autoprefixer')]
            },
          },
          // Sassをバンドルするための機能
          {
            loader: 'sass-loader',
            options: {
              // ソースマップの利用有無
              sourceMap: SOURCEMAP_FLAG,
            }
          }
        ]),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('style.css'),
  ],
  // source-map方式でないと、CSSの元ソースが追跡できないため
  devtool: "source-map"
};

引用元 : https://qiita.com/hiroseabook/items/383d54a87fd5ab4108bc

● 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
06/30 22:28

edit