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.entryentry には、

string

、配列、またはオブジェクトを指定できます。 エントリが文字列の場合、

エントリ ファイル

の定義に使用されます。

entry: './js/main.js'

エントリが配列の場合、エントリ js ファイルも含まれます。別のパラメータを使用して、webpack によって提供される静的リソース サーバーを構成することもできます。 、webpack-dev-server。 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中文网其它相关文章！

推荐阅读：

构建项目时本地ip无法访问处理方法

vue-cli+webpack创建项目报错

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