WebPack4を導入する
WebPack4を導入する:
webpackを利用することで複数のJavaScriptファイルをバンドルすることに加え、CSSや画像などのアセットの管理を行うことができます。
必要とするバージョン
- node 8.2以上
- npm5.2.0以上
プロジェクト を作成するディレクトリに移動し、webpackをインストールします。
lodashの関数は
pacakge.jsonの不要なmainを削除し、privateを追加してパッケージをプライベートにします。
HTMLファイルとJavaScriptファイルが用意できたので、一旦webpackでビルドしてみましょう。
npxコマンドを利用することでローカルにインストールされたwebpack(./node_modules/.bin/webpack)を実行することができます。
src/index.jsがビルドされdist/main.jsが生成されます(distディレクトが存在しない場合、自動的に作成されます)。
modeオプションが設定されていないため、警告が出ています。このオプションは後から追加します。
Hello webpackの表示が確認できたところで、外部に依存しているlodashをローカルにインストールします。
ローカルにインストールすることでグローバル変数の汚染を防ぎ、コードの補完を可能にします。
webpackはES6のimport, exportを標準でサポートしています。
これまではwebpackのデフォルトの設定を使用してきました。webpack.config.jsを用意することでより細かな設定を指定することができます。
webpackはデフォルトで
デフォルトの設定を明示したものが下のwebpack.config.jsになります。
developmentモードは開発に有効なデバッガの利用やコンパイルが早く、productionモードではデプロイ時に有効なコードの圧縮などを行います。
webpack 4: mode and optimization
npm scriptを利用することで、これまで
package.jsonのscriptプロパティに下の内容を追加します。
npm scriptは
モダンなJavaScriptはES2015以降の便利な構文が利用されています。しかし、古いバージョンのブラウザでは、ES2015に対応していません。
そのため、Babelを利用することで、ES2015以降の構文をES2015以前の構文に変換(トランスパイル)します。
ES2015(ES6) 入門
webpackでBabelを利用するためにはloaderをインストールします。loaderを利用することでTypeScriptからJavaScriptへの変換やCSSのバンドルなどを可能にします。
webpack4の導入とBabel
webpack
webpackを利用することで複数のJavaScriptファイルをバンドルすることに加え、CSSや画像などのアセットの管理を行うことができます。At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.本記事はwebpackのチュートリアルを参考にしています。
必要とするバージョン
- node 8.2以上
- npm5.2.0以上
webpackの導入
プロジェクト を作成するディレクトリに移動し、webpackをインストールします。mkdir webpack-test cd webpack-test npm init -y npm install --save-dev webpack webpack-cli
webpackを利用したjsファイルのバンドル
dirディレクトリ配下にHTMLファイル、srcディレクトリ配下にJavaScriptファイルを用意しますmkdir src dist touch dist/index.html src/index.js
index.htmlではCDNに用意されているlodashのファイルを読み込んでいます。lodashとはJavaScriptのユーティリティ関数を集めたライブラリです。lodashの関数は
_.関数名で使用し、index.jsでは配列の要素を文字列に結合する関数joinを使い、配列['Hello', 'webpack']を文字列'Hello webpack'に結合しています。index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
index.js
function component() {
let element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
package.json
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
},
}
npxコマンドを利用することでローカルにインストールされたwebpack(./node_modules/.bin/webpack)を実行することができます。
npx webpack
modeオプションが設定されていないため、警告が出ています。このオプションは後から追加します。
dist/index.htmlをブラウザで開き、Hello webpackが表示されていると成功です。
moduleを使用する
Hello webpackの表示が確認できたところで、外部に依存しているlodashをローカルにインストールします。ローカルにインストールすることでグローバル変数の汚染を防ぎ、コードの補完を可能にします。
npm install --save lodash
dist/index.htmlのlodashを読み込んでいるscriptタグを削除し、src/index.jsでローカルにインストールしたlodashライブラリをインポートします。index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
index.js
import _ from "lodash";
function component() {
let element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
npx webpackを実行するとlodashがバンドルされていることが確認できます。
webpack.config.jsを利用する
これまではwebpackのデフォルトの設定を使用してきました。webpack.config.jsを用意することでより細かな設定を指定することができます。webpackはデフォルトで
src/index.jsをエントリーポイントとして読み込み、バンドルした結果をdist/main.jsに出力します。デフォルトの設定を明示したものが下のwebpack.config.jsになります。
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
modeオプションの警告を修正する
npx webpackを実行した後に出力されていた警告はmodeオプションを指定していなかったことが原因です。modeオプションには'development'か'production'の指定が可能です。developmentモードは開発に有効なデバッガの利用やコンパイルが早く、productionモードではデプロイ時に有効なコードの圧縮などを行います。
webpack 4: mode and optimization
webpack.config.js
module.exports = {
mode: 'development',
// ...
};
npm scriptを利用する
npm scriptを利用することで、これまでnpx webpackで利用してきたwebpackの実行を置き換えることができます。package.jsonのscriptプロパティに下の内容を追加します。
package.json
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
}
npm run スクリプト名で実行します。modeオプションを追加したことにより、警告の出力が消えます。
npm run build
JavaScriptのモダンなスタイルを利用する
モダンなJavaScriptはES2015以降の便利な構文が利用されています。しかし、古いバージョンのブラウザでは、ES2015に対応していません。そのため、Babelを利用することで、ES2015以降の構文をES2015以前の構文に変換(トランスパイル)します。
ES2015(ES6) 入門
webpackでBabelを利用するためにはloaderをインストールします。loaderを利用することでTypeScriptからJavaScriptへの変換やCSSのバンドルなどを可能にします。
npm install -D babel-loader @babel/core @babel/preset-env webpack
webpack.config.js
const path = require('path');
module.exports = {
// ...
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
index.jsの関数をアロー関数に変換し、Babelでトランスパイルされていることを確認しましょう。index.js
import _ from "lodash";
const component = () => {
let element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
npm run buildでwebpackを実行すると、ブラウザでアロー関数がfunctionにトランスパイルされていることが確認できます。
コメント
コメントを投稿