webpack のより実用的な機能の詳細な紹介

この記事は主に webpack の実用的な小さな機能を紹介します。非常に優れており、必要な友人は参照してください。

そのほとんどは基本的な内容です。この問題では、より実用的な機能をいくつか紹介します

1.overlay

overlay は devServer のプロパティです。 設定例は次のとおりです。 ?オーバーレイの機能は、ターミナルのコンパイル中に発生したエラーをブラウザで開いたページに表示することです。この属性を設定すると、今後コードを記述するときに、コンパイル中にエラーが発生した場合に、エラーの内容を確認するためにターミナルを開く必要がなくなり、エラーをページ上で直接確認できるため、非常に便利です。発達。

2.require.ensureオーバーレイと比較すると、require.ensure は、前回説明したマルチページ アプリケーションを構成しましたが、SPA アプリケーションの場合はどうなるでしょうか。

私たちが遭遇する最も一般的な問題は、コードがすべて js にパッケージ化されているため、js が大きくなりすぎ、最終的にアプリケーションが最初にロードされるときに長い待ち時間が発生するということです。では、この問題を解決するにはどうすればよいでしょうか。 require.ensure は、この問題を解決するために特別に設計されています。

使い方は？

使用方法も非常に簡単で、次の記述方法に従って vue のルーターを設定するだけです:

devServer: {
 overlay: {
  errors: true,
  warnings: true
 }
}

require.ensure には 3 つのパラメーターがあることがわかります

最初のパラメーターは、依存関係リストを設定することです。依存モジュールは現在のモジュールと一緒にパッケージ化されます。2 番目のパラメータは、個別にパッケージ化されるモジュールをコールバックに渡す関数です。3 番目のパラメータは、設定後に js ファイル名を設定するために使用されます。これを読み込むと完了します。 ページを読み込むとき、各ページに属するコード部分が個別に読み込まれます。

3.webpack-bundle-analyzer

これは、モジュールパッケージのリソースを分析することです。まず見てみましょう。以下はそのレンダリングです:

それでは、どのように設定するのでしょうか? まず最初にそれをインストールし、次のように設定する必要があります:

const Layout = require('../Layout')
const Home = r => require.ensure([], () => r(require('../home'), home)
export default [{
 path: '/',
 component: Layout,
 children: [{
  path: '',
 component: Home
 }]
}]

とてもシンプルですが、非常に実用的ではありませんか~

4.DllPlugin+DllReferencePlugin

Webpack開発を使用するプロセスで、私はプロジェクトの起動とコンパイルに時間がかかりすぎるのはなぜですか?プロジェクトが徐々に大きくなると、プロジェクトがコンパイルを開始するたびに、より多くのモジュールに依存するため、すべてのモジュールをコンパイルしてパッケージ化する必要があるため、必然的にコンパイル時間が長くなります。

まず第一に、考え方はこれです。通常、node_modules ファイル内の依存関係は変更されないため、これらの依存関係を事前にパッケージ化し、常に使用することができます。 。

DllPlugin は、依存関係パッケージを事前にパッケージ化するために使用されるプラグインです。 DllPlugin は 2 つのプラグインに分かれており、1 つは DllPlugin、もう 1 つは DllReferencePlugin です。

まず、DllPlugin の機能は、依存関係を事前にパッケージ化することです。手順は次のとおりです:

依存するすべてのモジュールを導入するために新しい Vendor.js を作成します:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins = [
 new BundleAnalyzerPlugin({
 // Can be `server`, `static` or `disabled`.
 // In `server` mode analyzer will start HTTP server to show bundle report.
 // In `static` mode single HTML file with bundle report will be generated.
 // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
 analyzerMode: 'server',
 // Host that will be used in `server` mode to start HTTP server.
 analyzerHost: '127.0.0.1',
 // Port that will be used in `server` mode to start HTTP server.
 analyzerPort: 8888,
 // Path to bundle report file that will be generated in `static` mode.
 // Relative to bundles output directory.
 reportFilename: 'report.html',
 // Module sizes to show in report by default.
 // Should be one of `stat`, `parsed` or `gzip`.
 // See "Definitions" section for more information.
 defaultSizes: 'parsed',
 // Automatically open report in default browser
 openAnalyzer: true,
 // If `true`, Webpack Stats JSON file will be generated in bundles output directory
 generateStatsFile: false,
 // Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
 // Relative to bundles output directory.
 statsFilename: 'stats.json',
 // Options for `stats.toJson()` method.
 // For example you can exclude sources of your modules from stats file with `source: false` option.
 // See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
 statsOptions: null,
 // Log level. Can be 'info', 'warn', 'error' or 'silent'.
 logLevel: 'info'
 })
]

Webpack の新しい設定ファイルを作成します。 .config.dll.js、構成は次のとおりです:

import Vue from 'vue';
import ElementUI from 'element-ui';
import VouRouter from 'vue-router';

構成後、ターミナルで webpack --config webpack.config.dll.js を実行すると、dll.vendore.js と dll が表示されます。 dist/dll ディレクトリ内の .vendore.js、vendor-manifest.json ファイル この時点で、DllPlugin の依存関係を抽出する機能は完了です。

DllReferencePlugin の構成は次のとおりです。この構成は、プロジェクトの元の webpack.config.js ファイルを見つけて、次のように構成します。プロジェクトの実行時に問題が発生すると、次のプロンプトが表示されます:

Vue のランタイム専用ビルドを使用しています...

おそらく、vue テンプレートを使用しているため、使用している vue のバージョンが間違っていることを意味しますなので、私は webpack.config.dll にいます。js で vue に対して次の設定を行います。

const path = require('path');
const webpack = require('webpack');
module.exports = {
 entry: {
  vendor: [path.resolve(__dirname, 'vendor')]
 },
 output: {
  path: path.resolve(__dirname, './dll'),
 filename: 'dll.[name].js',
 library: '[name]'
 },
 plugins: [
 new webpack.DllPlugin({
 path: path.join(__dirname, "./dll", "[name]-manifest.json"),
 name: "[name]"
 })
 ],
 resolve: {
 extensions: ['js']
 }

それ以外の場合は、vue.runtime.common.js がデフォルトでパッケージ化されます。vue.common をパッケージ化するのが正しいです。 jsファイル。上記の設定を行った後は、大丈夫だと思いましたが、まだ甘かったため、同じエラーが報告されました。

上記は私があなたのためにまとめたものです。

関連記事:

NODEJSでのhttp実装の詳細な紹介

Three.jsを使用したWeChatジャンプゲームの実装方法

JSを使用した入力検索機能の実装方法

以上がwebpack のより実用的な機能の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。