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 の役割を無視します)。

 var currentBase = process.cwd();
 var context = abcOptions.options.context ? abcOptions.options.context : 
 path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用Linux重复加载 .vimrc文件

vue-cli+webpack无法新建项目

以上がwebpack.config.js パラメータの使用に関するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。