webpackからサードパーティライブラリを抽出する正しい方法を詳しく説明します

webpackでパッケージする際に、サードパーティライブラリを独立して抽出し、安定版のファイルとして利用して、ブラウザのキャッシュを使用してリクエストの回数を減らすことをよく考えます。サードパーティライブラリを抽出する一般的な方法は2種類あります

CommonsChunkPlugin
DLLPlugin

違い：前者は、サードパーティライブラリもパッケージするたびにパッケージします。後者は、プロジェクトファイルのみをパッケージします。最初にパッケージしたサードパーティライブラリの圧縮ファイルを参照するだけで良いです

CommonsChunkPluginメソッドの概要

vueを例に取ってみます

const vue = require('vue')
{
 entry: {
 // bundleは、パッケージするプロジェクトファイルのエクスポート名です。appはエントリーボックスファイルです
 bundle: 'app'，
 // vendorは、パッケージするサードパーティライブラリの最終的なファイル名です。配列にはパッケージするサードパーティライブラリが含まれます。node_modulesにない場合、ライブラリの具体的なアドレスを入力できます
 vendor: ['vue']
 }
 output: {
  path: __dirname + /bulid/','
 // ファイル名
 filename: '[name].js'
 }
 plugins: {
 // ここでwebpack.optimize.CommonsChunkPlugin構造体をインスタンス化します
 // パッケージが完了すると、vendor.jsファイルが生成されます
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

次に、生成されたファイルをhtmlファイルにインポートします

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

DLLPluginメソッドの概要

まず、2つのファイルを準備します

webpack.config.js
webpack.dll.config.js

webpack.dll.config.jsファイルの設定は以下の通りです

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
 entry: {
 vendors: ['vue', 'vuex']
 }
 output: {
 filename: '[name].dll.js',
 path: 'dist/','
 library
 }
 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, 'dist')/[name]-manifest.json'),
  // これは上記のoutput.libraryオプションと一致する必要があります
  name: library
 }),
 ],
}

それからwebpack.config.jsファイルの設定は以下の通りです

const webpack = require('webpack')
module.exports = {
 entry: {
 app: '.',/src/index
 }
 output: {
 filename: 'app.bundle.js',
 path: 'dist/','
 }
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendors-manifest.json')
 }
 ]
}

それから実行します

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

HTML 引用方法

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

これで本文のすべてが終わり、皆様の学習に役立つことを願っています。また、呐喊教程を多くの皆様に支持していただけると嬉しいです。

声明：本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしました。当サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害の疑いがある場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メールを送信する際、#を@に変更してください）で通報し、関連証拠を提供してください。一旦確認がとりあえず、当サイトは即座に侵害疑いの内容を削除します。

基本教程