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 すればよかったですかね。。