webpackではnode_modulesより上のディレクトリにあるファイルにライブラリを指定できない

webpackの落とし穴

npm install したjqueryを ProvidePluginや externalsに指定する時、
node_modulesがあるディレクトリより上の階層のjsファイルをbundleしようとすると、エラーになる。

app/
	node_modules/
	webpack.config.js	<—ココから
public/
	js/
		main.js			<-このjsファイルをbundle

この配置で npm install したjqueryを使おうと、以下のような設定を書いても、$ is not found と言われます。

webpack.config.js

module.exports = {
	entry: '../public/js/main.js',
	plugin:[
		new ProvidePlugin({
			jquery: 'jquery',	// エラー
			$: 'jquery'			// エラー
		})
	]
};

解決法

public配下にあるjsファイルをapp配下にコピーしてくる。

public/
    js/
       main.js     <-ココから
app/
    node_modules/
    src/
        main.js    <- ココにコピー
    webpack.config.js

そして同じようにwebpackコマンド叩けば、bundleされました。

原因

publicは公開フォルダです。
その中で設定ファイルが見えるのがちょっといやで、外に出しました。
publicより上のフォルダなら見えないから、そこで npm install すればよかったですかね。。