[解決済み] Webpack が node_module を除外しない。
質問
Nodeフレームワークを構築するためにwebpackを使っています(本当はgulpを使うべきですが)。EJS モジュールをインクルードすると、node_modules ディレクトリを除外するように明示的に指示したにもかかわらず、webpack はコンパイルされたソースにそれを含めます。
module.exports = {
context: __dirname,
target: 'node',
// ...
output: {
libraryTarget: 'commonjs'
// ...
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?{ "stage": 0, "optional": ["runtime"] }'
}
]
}
};
見ての通り、JSファイルに対するテストがあり、node_modulesを除外するように指示しました; なぜ、私の除外を無視するのでしょうか?
解決方法は?
設定ファイルを見る限りでは、以下のものだけを除外しているようです。
node_modules
でパースされないようにする。
babel-loader
,
ただし
をバンドルしています。
を除外するために
node_modules
とネイティブノードライブラリをバンドル対象から外す必要があります。
-
追加
target: 'node'
を、あなたのwebpack.config.js
. これにより、バンドルが実行される環境としてNodeJsが定義されます。webpack では、チャンク読み込みの動作、利用可能な外部モジュール、生成されるコードのスタイルが変更されます。require()
NodeJsの場合)バンドル時に使用されます。 -
を設定します。
externalPresets
のnode
からtrue
. Webpack@5では、この構成は次のようになります。 ネイティブノードモジュールを除外する (path、fs など) をバンドルしないようにします。 -
使用方法 webpack-node-externals(ウェブパックノードエクスターナル を除外するために、他の
node_modules
.
というわけで、結果の設定ファイルは以下のようになります。
var nodeExternals = require('webpack-node-externals');
...
module.exports = {
...
target: 'node', // use require() & use NodeJs CommonJS style
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
externalsPresets: {
node: true // in order to ignore built-in modules like path, fs, etc.
},
...
};
関連
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み】SyntaxError: ChromeのJavascriptコンソールでUnexpected Identifierが発生する。
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angular JS Uncaught Error。[インジェクター:モジュラー]。
-
[解決済み】JavaScriptのisset()に相当するもの
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】SyntaxError: JSON の位置 1 に予期しないトークン o があります。
-
[解決済み】XMLパースエラー:ルート要素が見つからない コンソールの場所 FF
-
[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか?[Kendo-UI]です。
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み】TypeError: AngularJSで未定義のプロパティ'get'を読み取れない