web-dev-qa-db-ja.com

webpack 4の使用開始に関する問題

here のとおりにチュートリアルを進めています。しかし、ドキュメントが古くなっているように見えることに驚いています。例えば

npx webpack src/index.js dist/bundle.jsは次のエラーで失敗します：

CLIは別のパッケージwebpack-cliに移動しました。 CLIを使用するには、webpack自体に加えて「webpack-cli」をインストールしてください。 -> npmを使用する場合：npm install webpack-cli -D-> yarnを使用する場合：yarn add webpack-cli -D

Webpack-cliをインストールして再試行すると、次のエラーが表示されます。

ハッシュ：af9bc06fd641eb0ffd1eバージョン：webpack 4.0.0時間：3865msビルド時：2018-2-26 05:10:45 1アセットエントリポイントmain = main.js 1 （webpack）/buildin/module.js 519バイト{0} [構築] 2 （webpack）/buildin/global.js 509バイト{0} [構築] [3] ./src/index.js 212バイト{0} [構築] ] [4] multi ./src/index.js dist/bundle.js 40バイト{0} [構築済み] + 1つの非表示モジュール

構成の警告「モード」オプションが設定されていません。 「mode」オプションを「development」または「production」に設定して、この環境のデフォルトを有効にします。

マルチ./src/index.jsのエラーdist/bundle.jsモジュールが見つかりません：エラー： '/ var/app/webpack_demo' @ multi ./src/index.jsの 'dist/bundle.js'を解決できませんdist/bundle.js

Webpackの人気を考えると、ドキュメンテーションは実際の振る舞いを反映していなければならないので、私が何かおかしなことをしていないことを願っています。何か間違ったことをしているかどうかを教えてください。

編集

webpack 4 へのアップグレードの詳細説明

node.jswebpackwebpack-4
25
sakhunzai

Webpack configまたはcliコマンドでmode paramを渡すことができます。

構成：mode: 'development'またはmode: 'production'

CLI：webpack --mode developmentまたはwebpack --mode production

35
Iurii Budnikov

Webpackチームは、できるだけ早くパッケージドキュメントの更新に取り組んでいます。 新しいガイドとドキュメントは webpack.js.org 公式サイトで入手できます。

その間、 また、メディア上の関連記事を読むこともできます。

GitHubでこの Webpack-Demo を対象としたプロジェクトWebpack 4チュートリアルを確認してください。 webpack構成で使用される有用なリソースへの以前およびその他のリンクは、プロジェクトのReadmeに含まれています。 2つのゼロ構成ビルド（デフォルトのセットを含む新しいwebpack modeオプションを使用）と、カスタム構成を使用する別の2つのビルドがあります。

webpack-4 なので、CLIはwebpack-cliに移動したため、devDependenciesにもこのパッケージをインストールする必要があります。また、 webpack は、新しいmode構成がCLI実行または構成オブジェクトのいずれかで設定されることを期待しています。

npmスクリプトでのCLIの使用：

"scripts": {
    "dev": "webpack --mode development",
    "prod": "webpack --mode production"
}

Webpack構成オブジェクトでmodeプロパティを設定します。

{
    mode: 'production' // | 'development' | 'none'
}

モード値が指定されていない場合、webpackはproduction値（デフォルトのオプション）を使用します。ただし、出力では次のように警告します。

構成の警告

「モード」オプションが設定されていません。 「mode」オプションを「development」または「production」に設定して、この環境のデフォルトを有効にします。

Webpack modeは、一連のデフォルト（mode値に応じた構成プロパティのデフォルト値）を使用して、有用なビルドに必要な構成を削減します。

  • productionは、あらゆる種類の最適化を有効にして、最適化されたバンドルを生成します
  • developmentは有用なエラーメッセージを有効にし、速度が最適化されます
  • noneはすべてを無効にする隠しモードです

詳細は リリースノートと変更ログ をご覧ください

8
Carloluis

間もなく更新されます。詳細については、 this リンクを参照してください。

Migration Guideとv4 Docs Additionsが完成しました！進行状況を追跡したり、助けを求めたりするには、ドキュメントリポジトリに立ち寄り、次のブランチをチェックアウトして、助けてください！

4
C.N

同じ問題が発生し、少しの調査の結果、この問題を確認できるように修正すべき問題が見つかった Githubスレッド

オプションの1つ：

内部 package.jsonscriptsをdevelopmentまたはproductionモードに設定します

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

そして今、npm run devを実行すると、bundle.jsが得られますが、縮小されません。

しかし、npm run buildを実行すると、縮小バンドルが得られます

4
Aaqib

Webpack 4のドキュメントはまだ準備ができていません。最近webpack 3から4に移行しましたが、すべての問題を理解するのにかなり時間がかかりました。

ここに、webpack 3から4への移行のリファレンスとして使用できるサンプルリポジトリを示します。

https://github.com/flexdinesh/react-redux-boilerplate

移行専用のコミットが1つあります。詳細については、それをご覧ください。

1
Dinesh Pandiyan