webpack4 の新機能は何ですか?注意が必要なことは何ですか?

この記事では、webpack4 の新機能について説明します。注意が必要なことは何ですか?困っている友人は参考にしていただければ幸いです。

開発者がまだ webpack3.x の余韻に浸っている間に、webpack4.x が静かに登場しました。

ユーザーにとって最も予想される質問は次のとおりです:

• 古いバージョンと比較して、新しいバージョンの変更点は何ですか?

• webpack3.x から webapck4.x への移行?

• webpack4.x を使用する際に注意すべき点は何ですか?

#webpack の新機能

ビルド ツールとしての webpack の機能は次のとおりです。

• # # webpack.config.js で多くの独自の機能を設定できます;

• その設定は柔軟で変更可能です。それが悪いことでもある。カジュアルすぎるため、制御が難しく、次の問題が発生します。

Webpack の学習、使用、研究のコストが高すぎる (進行曲線が急すぎる) ;

• 小さなアプリケーションを構築するには、大規模なアプリケーションを構築するのと同じように、webpack.config.js を構成する必要があります (スズメは小さいですが、すべての内臓があります)。

  ##そして webpack4.x は新しい webpack の第一世代バージョンは、既存の問題を大幅に解決しました。

webpackk4.x では、webpack.config.js 構成ファイルを使用する必要はありません。

• 次の 6 つの手順を使用して、プロジェクトの構築を完了できます:

プロジェクト ディレクトリ (webpack-demo) を 1 つ作成し、変更したディレクトリに入ります。

mkdir webpack-demo && cd webpack-demo

package.json ファイル

1. npm init -y

webpack と webpack-cli の依存関係をロード

2. npm install webpack webpack-cli --save-dev

~/src/index.js ファイルをプロジェクトに追加します (index.js はデフォルトのエントリ ファイルで、デフォルトのエントリ ディレクトリは ~/src です。もちろん、追加することもできます)また、エントリ ファイルをカスタマイズする必要があります。package.json のメイン構成を変更する必要があります。項目は指定されたファイルです)

3. index.js ファイルのコードは次のとおりです:

   console.log('hello webpack.')

package.json を開き、スクリプト構成項目に次のコードを追加します。

4. "scripts": {
       "build": "webpack"
   }

   注: これは NPM スクリプト コマンドです。

npm run build コマンドを実行すると、次の内容が表示されます。プロジェクト内の ~/dist/main.js ファイル。コマンド ウィンドウに、次の警告プロンプトが表示されるはずです。

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

このプロンプト メッセージは無視してください。 webpack4.x のプロジェクト初期化設定は webpack3.x とあまり変わらないことがわかりましたが、webpack4.x は異なります。必要な webpack.config.js 構成ファイルがありません。

パッケージング モードの変更

上記のプロンプト メッセージをもう一度見てみましょう。これは、「パッケージ化モードの構成項目が設定されていない場合、デフォルトのパッケージ化モードは実稼働モード (本番モード) であり、開発モードの場合は」ということを意味します。 (開発) では、この時点で、webpack4 のモード設定項目を設定する必要があることが理解できると思います。

実際のアプリケーションでは、開発モードと運用モードを区別することがよくありますが、webpack4.x ではこれは難しくありません。package.json 内のスクリプトを次のように変更するだけです:

"scripts": {
    "dev": "webpack --mode development", // 用于开发模式
    "build": "webpack --mode production" // 用于生产模式
}

'右！ webpack4.x はとてもシンプルです。」 webpack3.x のように、開発モードと運用モードにそれぞれ 2 つの構成ファイルを定義する必要はありません。

デフォルトの設定エントリ/終了をオーバーロードする

設定ファイル webpack.config.js がないため、設定の作業負荷が軽減されるだけでなく、メソッドを垣間見たばかりの私たちにとってはいくつかの疑問が生じます。例: 入口/出口をカスタマイズするにはどうすればよいですか?

webpack.config.js がない場合は、コマンド ラインにエントリ/終了構成項目を追加できます。コードは次のとおりです。

"scripts": {
    "dev": "webpack --mode development ./src/entry.js --output ./dist/bundle.js", // 用于开发模式
    "build": "webpack --mode production ./src/entry.js --output ./dist/bundle.min.js" // 用于生产模式
}

これは webpack.config を使用しないだけです。 .js の計画。

上記は、webpack4.x によってもたらされた全体的な変更です。

ただし、元の webpack.config.js 構成ファイル内のモジュールおよびプラグイン構成項目の関数実装には、引き続き webpack.config.js を使用する必要があります。 Webpack チームの計画では、一般的に使用されるいくつかのローダーとプラグインを構成することですが、運用モードに導入せずに *.js コードを圧縮できる UglifyJSPlugin 組み込みプラグインのみが実装されています。他のローダーとプラグインは、webpack.config.js を通じてのみ導入できます。

Webpack の移行と注意事項

webpack4.x でのこれらの変更を見ると、多くの人は webpack3.x から webpack4.x への移行が簡単かどうか疑問に思うだけではありません。 、実際には面倒ではありません、webpack4.x は webpack.3x と下位互換性があります。

webpack.config.js を導入しないように、そのときは npm スクリプトを使用しました。入口と出口のリロードと同様に、webpack.config.js 設定ファイル内で完了することもできます。構成はオリジナルと同じですが、webpack4.x には注意が必要な次の問題があります。

1. 升级到webpack4.x，你会发现在使用 extract-text-webpack-plugin 分离 *.css 出文件时经常出错，这是 extract-text-webpack-plugin 本身的问题，官方推荐使用 mini-css-extract-plugin 来避免问题的出现，但使用 mini-css-extract-plugin 有一个限制就是webapck须是4.2.0版本以上（较低的版本不支持）。

2. 使用 使用babel-loader 转化ES6->ES5时将不需要 .babelrc 配置文件，你只需要在 package.json 的 scripts 中添加 --module-bind js=babel-loader 即可完成对 babel-loader 的配置。

其他的loader和plugin没有什么大的变化。其实讲到这里基本完了，下面是用webpack4.x构建的一个demo。

webpack4.x的demo

紧接上面的配置：

首先，添加 html-wepback-plugin 和 html-loader 依赖：

npm install html-webpack-plugin html-loader --save-dev

html-webpack-plugin生成html文件（html文件用来加载打包生成 bundle.js 文件），当然你也可以使用webpack支持的各种模板loader，这里使用 html-loader 支持的 *.html 类型模板来生成。

其次，添加 mini-css-extract-plugin 和 css-loader 依赖：

npm install mini-css-extract-plugin css-loader --save-dev

loader和plugin配置与webpack3.x类同，也可参考下面提供代码中的 webpack.config.js 文件。

然后，添加 babel-loader 、@babel/babel-core 和 @babel/babel-preset 依赖：

npm install @babel/core babel-loader @babel/preset-env --save-dev

loader和plugin配置与webpack3.x类同，也可参考下面提供源码中的 webpack.config.js 文件。

修改 package.json 中 scripts 如下：

"scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader  ./src/entry.js --output ./dist/bundle.js",
    "build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},

最后，添加 webpack-dev-server 依赖，实现项目文件修改，浏览器及时刷新

npm install webpack-dev-server

在 package.json 中 scripts 的 dev 替换 webpack 为 webpack-dev-server 即可，代码如下：

"scripts": {
    "dev": "webpack-dev-server --mode development --module-bind js=babel-loader ./src/entry.js --output ./dist/bundle.js",
    "build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},

这样一个简单的demo就完成了。

其他的loader和plugin配置和webpack3.x类同。

以上がwebpack4 の新機能は何ですか?注意が必要なことは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。