Clever Geek Handbook

Webpackセットアップの基本

まず、webpackをインストールします。これは、次のコマンドを使用して実行されます。yarn



yarn add webpack webpack-cli -Dパッケージマネージャーを使用している場合

npm i webpack webpack-cli --save-dev、npmパッケージマネージャーの場合、



Webpackは webpack.config.js、プロジェクトのルートディレクトリに格納されている構成ファイルを使用して構成されます。



構成ファイルの例： 



const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};


初期構成は次のとおりです。



  • watch -webpackにファイルの変更を監視させて再構築します。
  • entry-プロジェクトへのエントリポイントと、プロジェクトの内部依存関係のグラフの作成を開始する場所を示します。
  • output-作成されたファイルが配置されるパスとその名前の付け方を指定します。


また、アプリケーションを開発およびデバッグするために必要なwebpack-dev-serverをインストールする必要があります。



yarn add webpack-dev-serverパッケージマネージャーyarnの場合

npm i webpack-dev-server、またはnpm



を使用する場合webpack-dev-serverを構成するには、構成ファイルにdevServerを追加します。



webpack-dev-serverのパラメーター： 



module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};


また、package.jsonファイルでプロジェクト起動スクリプトを追加/置換する必要があります。 



"start": "webpack-dev-server --mode development",


ビルドをビルドするためのスクリプト： 



"build": "webpack --mode production"


ブートローダー



ローダーは、他のモジュールを「ロード」するために使用される特別なモジュールです。また、ファイルがインポートまたは「ロード」されるときにファイルを前処理することもできます。



ローダーは、TypeScriptなどのファイルをJavaScriptに、sassをcssに変換できます。CSSやHTMLファイルをJavaScriptモジュールに直接インポートするようなこともできるかもしれません。それらを使用するには、構成ファイルのmodule.rulesセクションに必要なローダーを登録する必要があります。



ローダーの例：



  • babel-loader -babelを使用してES2015ファイルをロードします。
  • file-loader-さまざまなファイル（画像、音楽トラックなど）を出力ディレクトリにロードするため
  • style-loader-スタイルをロードするために使用されます
  • css-loader-スタイルファイルのロードを有効にします
  • @ svgr / webpack -svgイメージをjsx要素として使用できるようにするローダー


babel-loader を使用するには、インストールする必要がありますバベル/コア。プリセットもインストールしますバベル/プリセット環境。Babelに必要なプラグインとポリファイルを自動的に検出することにより、ES2015 +をES5にコンパイルします。次に、.babelrcファイルを作成し、以前にインストールしたプリセットを追加しましょう。 



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


次に、Javascriptファイルを変換するためのローダーを構成に追加しましょう。これにより、コードでES2015 +構文を使用できるようになります（最終ビルドでES5に自動的に変換されます）。 



{
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
       loader: 'babel-loader',
   },
},


ファイルローダーを 使用した構成例 



{
   test: /\.(png|jpe?g|gif)$/i,
   use: [
       {
           loader: 'file-loader',
       },
   ],
},


@ svgr / webpackローダーの 構成例 



{
   test : /\.(svg)$/,
   use: [
       {
           loader: "@svgr/webpack"
       }
   ]
}


プラグイン



本質的にすべての作業はプラグインシステム上に構築されているため、プラグインはWebpackのバックボーンです。これらは、ブートローダーの機能を大幅に拡張します。



ローダーは、任意の形式のファイルの前処理を実行します。これらは、パッケージの作成中または作成前に、個々のファイルのレベルで機能します。ローダーが終了すると、プラグインが回転します。プラグインは通常、1つの機能のみを実行します。



それらを使用するには、構成ファイルのプラグインセクションに必要なプラグインを追加する必要があります。



プラグインの例：



  • html-webpack-plugin -htmlファイルの生成に使用されます
  • copy-webpack-plugin-すでに存在する個々のファイルまたはディレクトリ全体をビルドディレクトリにコピーします。
  • definePlugin-グローバル定数を作成できます
  • HotModuleReplacementPlugin -HMRモードをオンにし、アプリケーションを完全にリロードせずに、変更された部分のみを更新します。


プラグインを追加した構成例： 



plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),
   }),
   new HtmlWebpackPlugin({
       template: "./public/index.html",
   }),
   new CopyWebpackPlugin({
       patterns: [
           { from: './public/favicon.ico', to: './public'}
       ]
   }),
],


また、jsコードを最小化するUglifyjsWebpackPluginプラグインを追加します。このため、uglifyjs-webpack-pluginをインストールして、最適化セクションに追加する必要があります。 



optimization: {
   minimizer: [new UglifyJsPlugin()]
},


More articles:


All Articles