webpack2コード分割とCommonsChunkPlugin

コード分割とCommonsChunkPluginを使用して問題が発生しました。私はファイルが自動的にキャッシュされるrequire.jsに慣れています。ウェブパックの設定にはlibraryTarget: 'amd'も使用しています。webpack2コード分割とCommonsChunkPlugin

// fileA.js 
import $ from 'jquery' 

// fileB.js 
import $ from 'jquery' 

    Asset Size Chunks     Chunk Names 
fileB.js 271 kB  0 [emitted] [big] fileB 
fileA.js 271 kB  1 [emitted] [big] fileA

だから、両方のファイルは、fileAとfileBがjqueryが含まれている：

これら2つの単純なファイルを考えると、これは私が手に出力されます。また、私はhtmlファイルで次のようなファイルを使用することができます。この出力が得られ

new webpack.optimize.CommonsChunkPlugin({ 
    name: 'common' 
}),

：

Asset  Size Chunks     Chunk Names 
fileB.js 635 bytes  0 [emitted]   fileB 
fileA.js 617 bytes  1 [emitted]   fileA 
common.js  274 kB  2 [emitted] [big] common

私の設定は次のようになりますので、私は、基本的に独自のファイルへのjQueryを抽出するために CommonsChunkPluginを使用することができ、ドキュメントを1として

require(['./dist/fileA.js', './dist/fileB.js'], function() { 
})

BUTブロックrequireブロックを使用できません。common.jsも含まれていますdes webpackランタイム。私が今得するのは、Uncaught ReferenceError: webpackJsonp is not definedのエラーです。

それでは、私が必要となることである。

fileA.js（のみjqueryのを必要とし、 "FILEA" のコードが含まれています）
fileB.js（のみjqueryのを必要とし、 "FILEB" のコードが含まれています）
jquery.js（jQueryのもののすべて）
common.js（のみWebPACKのためのランタイムが含まれています）

私はすでに012のために、このような何かを試してみましたとfileBが、それは基本的に同じ出力です：

define(['jquery'], function ($) { 

})

A（ベンダー）（fileAのような）スクリプトはロードされ、依存関係としてそれを持っている場合、ライブラリにのみ、ロードする必要があります（それはrequirejsであるとして）。

これを達成できますか？私は何度もwebpack2のドキュメントをスキミングしましたが、私を助ける何かを見つけることができませんでした...

編集：

// fileA.js 
import $ from 'jquery' 
import Vue from 'vue' 
// fileB.js 
import $ from 'jquery' 
// fileC.js 
import Vue from 'vue'

：私は、ソースファイルを変更し

module.exports = { 
    entry: { 
    jquery: ['jquery'], 
    vue: ['vue'], 
    fileA: ['./src/fileA.js'], 
    fileB: ['./src/fileB.js'], 
    fileC: ['./src/fileC.js'] 
    }, 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    publicPath: '/dist', 
    filename: '[name].js', 
    libraryTarget: 'amd' 
    } 
} 

module.exports.plugins = (module.exports.plugins || []).concat([ 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: ['vue', 'jquery'] 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: 'common', 
    chunks: ['vue', 'jquery'], 
    minChunks: Infinity 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin() 
])

：[OK]を、いくつかのgithubの問題の助けを借りて、私は次のような構成で正確な資産の生成を得ることができましたこれは出力です：

vue.js  193 kB  0 [emitted]   vue 
fileC.js 447 bytes  1 [emitted]   fileC 
fileB.js 579 bytes  2 [emitted]   fileB 
fileA.js 666 bytes  3 [emitted]   fileA 
jquery.js  269 kB  4 [emitted] [big] jquery 
common.js 5.78 kB  5 [emitted]   common

ただし、私が作成しました

：

<body> 
    <script src="./dist/common.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"></script> 
    <script> 
    require(['./dist/fileA.js', './dist/fileB.js', './dist/fileC.js'], function (a, b, c) { 
    }) 
    </script> 
</body>

次のエラーがfileAためとfileCの両方に発生し...

common.js:55 Uncaught TypeError: Cannot read property 'call' of undefined 
    at __webpack_require__ (common.js:55) 
    at Object.7 (fileA.js:16) 
    at __webpack_require__ (common.js:55) 
    at Object.6 (fileA.js:6) 
    at __webpack_require__ (common.js:55) 
    at webpackJsonpCallback (common.js:26) 
    at fileA.js:1 
    at Object.execCb (require.js:1696) 
    at Module.check (require.js:883) 
    at Module.enable (require.js:1176)

編集：次のエラーでその結果のように210ファイル私が遭遇した問題を示すrepo on github。 Rafael De Leonの答えによると、私はSystem.import('<module>')を使って他のファイルを非同期にインポートしています。 main.tsfileA.tsをこの構文でインポートすると、output.js（コンパイル済みmain.tsファイル）が必要な場合にエラーが発生します。エラーはfileAがoutput.jsからロードされているときに発生するようです... github issueを作成しました。これはバグだと思っています。

出典

2017-07-04 Johannes

A (Vendor) library should only be loaded, if a script (like fileA) is loaded and has it as a dependency (as it is with requirejs).

この結果が必要な場合、CommonsChunkPluginはあなたが探しているものではありません。このプラグインは、異なるエントリやその他のCommonChunkPluginで使用されるファイルを1つのファイルに集約することです。

私はすでに）（輸入 `で見ていた`と `require.ensure`そうHow to bundle vendor scripts separately and require them as needed with Webpack?が

出典

2017-07-04 16:59:12

に動作しますあなたは需要

の「ベンダー」ファイルをロードするためにimport()またはrequire.ensure探しているものだと思います正しく動作させることができませんでした。私は提案された質問をしようとするとすぐにあなたに戻ってくる！ – Johannes

提案に基づいて自分の回答を更新しましたが、別の問題が発生しました。何か案は？ – Johannes

webpack2コード分割とCommonsChunkPlugin

答えて

関連する問題