この記事は主に 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 }] }]
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' }) ]
import Vue from 'vue'; import ElementUI from 'element-ui'; import VouRouter from 'vue-router';
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'] }
NODEJSでのhttp実装の詳細な紹介
Three.jsを使用したWeChatジャンプゲームの実装方法
以上がwebpack のより実用的な機能の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。