webpack.config.jsをベースにしたパラメータの詳細説明

ここで、webpack.config.js に基づいたパラメーターの詳細な説明を共有します。これは優れた参考値であり、皆様のお役に立てれば幸いです。

webpack.config.js ファイルは通常、プロジェクトのルート ディレクトリに配置され、それ自体も標準 Commonjs 仕様のモジュールです。

var webpack = require('webpack');
module.exports = {
 entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'
 ],
 output: {
  path: './build',
  filename: 'bundle.js'
 },
 module: {
  loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude:  /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  {test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
  ]
 },
 resolve:{
  extensions:['','.js','.json']
 },
 plugins: [
  new webpack.NoErrorsPlugin()
 ]
};

1.entry

entry には文字列、配列、またはオブジェクトを指定できます。

entry が文字列の場合、エントリ ファイルの定義に使用されます:

entry: './js/main.js'

entry が配列の場合、webpack、webpack によって提供される静的リソース サーバーの構成に別のパラメーターを使用できます。 -開発サーバー。 webpack-dev-server は、プロジェクト内の各ファイルの変更を監視し、リアルタイムでビルドし、ページを自動的に更新します:

entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'

エントリがオブジェクトの場合、異なるファイルを異なるファイルにビルドし、必要に応じて使用できます。たとえば、hello.js を hello ページに導入するだけです。

 entry: {
  hello: './js/hello.js',
  form: './js/form.js'
 }

2.output

出力パラメータは、ビルドされたファイルの出力を定義するために使用されるオブジェクトです。これにはパスとファイル名が含まれます:

 output: {
  path: './build',
  filename: 'bundle.js'
 }

エントリで複数のファイルを定義してビルドする場合、ファイル名はそれに応じて [name] に変更できます。js は、ビルド後にさまざまなファイルの名前を定義するために使用されます。

3.module

モジュールの読み込みに関しては module.loaders で定義します。ここでは、正規表現を使用して異なるサフィックスを持つファイル名を照合し、それらに対して異なるローダーが定義されています。たとえば、より少ないファイルに対して 3 つのローダーを連続して定義します (! カスケード関係を定義するために使用されます):

module: {
 loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
 ]
}

さらに、png や jpg などの画像リソースを追加して、10k 未満の場合に自動的に Base64 画像に処理することもできます。ローダー:

{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}

css、less、images にローダーを追加した後、node のように js ファイルを要求できるだけでなく、css、less、さらには画像ファイルも要求できます:

 require('./bootstrap.css');
 require('./myapp.less');
 var img = document.createElement('img');
 img.src = require('./glyph.png');

しかし、知っておく必要があるのは、必要なファイルが js バンドルにインライン化されることを確認します。必須の記述方法を保持し、CSSファイルを別途取り出したい場合は、後述の[extract-text-webpack-plugin]プラグインを使用できます。

上記のコード例で構成された最初のローダーでは、react-hot というローダーが確認できます。私のプロジェクトは反応を学習し、関連するコードを書くために使用されるため、反応コンポーネントのホット置換を実現できる反応ホットローダーを構成しました。エントリパラメータで webpack/hot/only-dev-server を設定したため、react-hot-loader を使用するために webpack 開発サーバーを起動するときに --hot パラメータを有効にするだけで済みます。 package.json ファイルで次のように定義します:

"scripts": {
  "start": "webpack-dev-server --hot --progress --colors",
  "build": "webpack --progress --colors"
 }

4.resolve

パッケージをビルドするとき、webpack はディレクトリによってファイルを検索します。resolve 属性の拡張子配列を使用してプログラムを構成できます。すべてのファイルのサフィックス:

 resolve:{
  extensions:['','.js','.json']
 }

次に、js ファイルをロードする場合は、common.js ファイルをロードするために require('common') だけが必要です。

6.externals

プロジェクト内で他のクラス ライブラリまたは API を必要としたいが、これらのクラス ライブラリのソース コードをランタイム ファイルに組み込みたくない場合、これは非常に困難です。実際の開発が必要です。この時点で、externals パラメーターを構成することでこの問題を解決できます:

 externals: {
  "jquery": "jQuery"
 }

これにより、プロジェクトでこれらの API を自信を持って使用できるようになります: var jQuery = require("jquery");

7.context

モジュールを要求するとき、次のように require に変数を含めると、

require("./mods/" + name + ".js");

その場合、コンパイル中に特定のモジュールを知ることができません。ただし、この時点で、webpack はいくつかの分析作業も行います:

1. 分析ディレクトリ: './mods'; 2. 正規表現を抽出します: '/^.*.js$ /'；

したがって、現時点では、コンパイルのために wenpack とより適切に連携するために、cake-webpack-config で行ったのと同じように、そのパスを指定できます (ここでは abcoption の役割を無視します)。 rreee上記は私が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。 関連記事:

ajax+springmvcはCとView間のデータ交換メソッドを実装

Spring MVCフロントエンドとバックエンド間の5つのajax対話メソッド

重複実装のAjax検証コード

以上がwebpack.config.jsをベースにしたパラメータの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。