webpack:はじめから実践まで

webpack

webpackはjavascriptアプリケーションのための静的モジュールパッケージングツールです。モジュール化の出現以来、人々はもともと様々なモジュールに分離されたコードの山にすることができますが、これは問題が発生し、つまり、jsの各ファイルは、読み込み速度が非常に遅くなっているにつながる、サーバーに行く必要があるので、webpackが登場し、彼はすべての小さなファイルを1つ以上の大きなファイルにパッケージ化することができます。webpackはアプリケーションを処理するとき、依存関係グラフを再帰的に構築します。依存関係グラフにはアプリケーションが必要とするすべてのモジュールが含まれ、すべてのモジュールを1つ以上のバンドルにパッケージ化します。

コアコンセプト

webpackには、webpackを使い始めるために理解する必要がある4つのコアコンセプトがあります。

エントリー

Entryはwebpackの開始点であり、コンポーネントの内部依存関係グラフの開始点としてwebpackがどのモジュールから開始すべきかをガイドします。webpack.config.js設定ファイルでentry属性を設定することで、1つ以上のエントリポイントを指定できます。

---webpack.config.js---
const path=require('path') //シングルエントリー書き込み
//モジュラーアプローチはnode環境独自のもので、ブラウザがネイティブでサポートしているものではない。
module.exports={
 entry:'./src/index.js'
}
const config = { //マルチページアプリケーションを書く
 entry: {
 pageOne: './src/pageOne/index.js',
 pageTwo: './src/pageTwo/index.js'
 }
};
module.exports=config;
注：複数ページのアプリケーション集約では、ページがジャンプするたびに、サーバーは新しいHTMLドキュメントをフェッチする。

エクスポート

output 属性は、webpack が作成するバンドルのエクスポート先を指定します。/アプリケーション構造全体は、指定された出力フォルダにコンパイルされます。 最も基本的なプロパティは、ファイル名とパスです。

---webpack.config.js---
module.exports={
 output:{
 path:path.resolve(__dirname,'dist'),
 filename:'[name].[contenthash].js'
 }
}
注：ファイルが変更されるたびに新しいjsファイルを生成するようにcontenthashを設定する。

上記の設定により、出力されたパッケージファイルはカレントディレクトリの dist フォルダに置かれます。

ローダー

loaderはすべての種類のファイルをwebpackが処理できる有効なモジュールに変換し、webpackのパッケージング機能を使って処理します。

webpackでは、loaderには2つの目的があります：

• 対応する loader が変換すべきファイルを特定します。
• それらのファイルを依存関係グラフに追加できるように変換します。

---webpack.config.js---
module.exports={
 module:{
 rules:[{
 test:/\.js$/,
 use:{
 loader:'babel-loader'
 },
 exclude:/node_modules/ //ノードを除外する_modulejsファイルの中。
 },
 {
 test:/\.scss$/,
 use:[
 {loader:'style-loader'},{loader:css-loader},{loader:scss-loader}
 ]
 }
 ]
 }
 
}

rules属性の値は配列であり、各配列オブジェクトは異なるマッチングルールを表します。testは異なるファイルサフィックスにマッチすることを示し、useはマッチしたときにファイルを処理するために呼び出されるローダーを示し、複数のローダーを使用する必要がある場合は配列が使用されます。

loader はチェイニングをサポートしており、 loader の処理順序は右から左へと呼び出されます。

scss-loader は .scss ファイルを .css ファイルにコンパイルし、css-loader は .css ファイルを commonJS モジュールにコンパイルし、style-loader は js 文字列を style タグに変換してページに挿入します。

プラグイン

プラグインは、パッケージングの最適化や圧縮から環境変数の再定義まで、ローダーができない他の処理を行うためのもので、さまざまなタスクに使用できるほど強力です。

---webpack.config.js---
module.exports={
 plugins:[
 new HtmlWebpackPlugin({
 title:'hello-webpack',
 template:'src/index.html'
 })
 ]
}

htmlwebpackpluginの役割は、各ビルド後に対応するhtmlファイルを生成し、ローダーが処理したファイルをhtmlファイルに自動的に挿入することです。

スキーマ

モードは設定オブジェクトのmode属性を通して設定することができ、主な値はproductionかdevelopmentです。2つのモードの違いは、一方がproduction環境のコンパイルとパッケージング用で、もう一方がdevelopment環境のコンパイルとパッケージング用です。productionモードでは、webpackが自動的にコードを圧縮・最適化するため、設定の必要はありません。

webpack.config.base.jsコードの分離により、同じコードの開発環境と本番環境をファイルに抽出し、それぞれのバージョンに導入することで、コードの重複を減らすことができます。

プロジェクトでwebpackを使用

distファイルのクリーンアップ

contenthashを使用しているため、jsファイルの各ビルドは異なる名前を持っていますが、新しいファイルが古いファイルを上書きすることはありません、古いファイルは常に/distフォルダに存在している、コンパイル回数の増加に伴い、このフォルダはますます大きくなるので、フォルダがきれいに整頓されていることを確認するために、/distフォルダをクリーンアップする必要があります。

package.jsonでの設定

"script":{
 build:"rimraf dist &&webpack"
}
原則としては、ファイルをビルドする前にdistフォルダを空にして、新しいファイルを生成する。
注意: ウィンドウシステムではrimraf distを使うが、bashを使っている場合はrm -rf distに変更できる。

プラグインで完了

ここで使用するプラグインはclean-webpack-plugin

---webpack.config.js---
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
 plugins: [
 new CleanWebpackPlugin(['dist'])
 ]
};

開発環境の構築

開発にhttp-serverを使用する場合、リアルタイムプレビュー用のサーバを開くことができますが、ここではhttp-serverも使用できますが、webpack-dev-serverはより強力なプレビューを提供し、よりwebpackと密接に統合されています。

最初に依存関係をインストールします：npm i -D webpack webpack-dev-server

---webpack.config.js---
module.exports={
 devServer: {
 port:8080, //サーバーポートを起動する；
 open: false, //モジュールのホットリプレースを有効にする
 hot: true, //gzip圧縮を有効にする
 contentBase: [
 path.join(__dirname, "public"), path.join(__dirname, "assets")
 ]
 },
 plugins: [
 new webpack.HotModuleReplacementPlugin({}) //ホットアップデートプラグイン
 ]
}
---package.json---
"script":{
 start:"webpack-dev-server"
}

webpack-dev-serverのコマンドラインからサーバーを起動します。起動後、ルートディレクトリにファイルが生成されないことがわかります。webpackはメモリ上にパッケージ化されており、ファイルが生成されない理由は、メモリ上のコードにアクセスする方がファイル内のコードにアクセスするよりも高速だからです。

public/index.htmlページでは、ローカルの静的ファイルを参照することがありますが、ページを直接開くと、これらの静的ファイルの参照が無効であることがわかるため、devserverはcontentBaseを追加し、複数の静的リソースディレクトリを指定します。

スタイル抽出

mini-css-extract-pluginスタイルは、スタイルローダを介してページに挿入されますが、本番環境では、個別にスタイルファイルを抽出する必要があり、私はjsからスタイルを取り除くために助けることができる、通常、本番環境では、スタイルを抽出します。

まず、依存関係をインストールします：npm i -D mini-css-extract-plugin

---webpack.config.js---
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
 //その他の設定
 module: {
 rules: [
 {
 test: /\.less/,
 use: [{
 loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader
 },{
 loader: 'css-loader'
 },{
 loader: 'less-loader'
 }]
 }
 ]
 },
 plugins: [
 new MiniCssExtractPlugin({
 filename: "[name].[contenthash].css",
 })
 ]
}

スタイル抽出を使用することで、ビルドは.cssファイルを生成し、htmlファイルに.cssファイルを導入するためにリンクを使用します。

babel-loaderの使い方

babel-loaderは、上位バージョンのes構文をブラウザが解析できるes5構文に変換するために使用されます。

まず、依存関係をインストールします：npm i -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime

npm i -S @babel/runtime

---webpack.config.js---
module.exports = {
 rules:[{
 test:/\.js/,
 use:{
 loader:{
 loader:'babel-loader'
 }
 },
 exclude:/node_modules/
 }]
}
babelコンフィギュレーションをルートディレクトリに展開し、新しい.babelrc 
---.baberlrc---
{
 "presets": [
 "@babel/preset-env"
 ],
 "plugins": [
 "@babel/plugin-transform-runtime"
 ]
}