既存のプロジェクトをwebpack化するとなると、困るのは古いライブラリたちですよね。
しかも古いバージョンで固定して開発してるので、バージョン変えたくない。
新しくしてどこか動かなくなっても困るし。
一番簡単な形
npm install jquery@[バージョン]
webpack.config.js
plugin: [
new ProvidePlugin({
jquery: 'jquery',
$: 'jquery'
})
]
これだけ。
Jsファイルで
$(function(){ なんか処理 }); とか、
$('.test') とか、
;(function($){ なんか処理 })(jQuery);と
しているところで、
npm install したjqueryライブラリを使えるようにprovideします。
しかし npm install したバージョンとダウンロードしたバージョンが同じかどうか確証が得られませんでした。。
jquery.jsファイルを比較してみても差分だらけ。。
bundleしたファイル以外で読み込む場合
jqueryをbundleせずに別で読み込む。
もともと読み込んでた <script type="text/javascript" src="jquery.js"></script> をそのままにして、bundleできるものだけbundleする。
OKケース
index.html
<head>
<meta charset="UTF-8">
<title>Webpack Test</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="app.bundle.js"></script>
</head>
NGケース
なぜかbundleしてしまうと、jsファイルは読み込んでいるのに $ is not found. と出てしまいます。
index.html
<head>
<meta charset="UTF-8">
<title>Webpack Test</title>
<!-- ↓この中にjquery.jsを含める -->
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="app.bundle.js"></script>
</head>
webpack.config.js
module.exports = {
entry: {
vendor: 'js/jquery.min.js',
app: 'main.js'
},
};
bundleに含めて使う
jqueryをnpm installしないで、webpackする。
webpack.config.js
module.exports = {
//前半略
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
],
resolve: {
alias: {
jquery: "../js/jquery"
}
},
module: {
noParse: new RegExp("../js/jquery")
}
};
ProvidePluginで設定しているjqueryに対して、
resolve.aliasでどのファイルを使うか設定してます。
パスはbundleするjsファイルのからのパスです。
parseされてしまうとダメなようなので、 noParse でも同じファイルを設定します。
jquery以外にもライブラリがたくさんある場合は、ここのように addVendor 関数作って設定すると楽かもしれませんね。
(参考)
- ファイル構成
app/
node_modules/
js/
jquery.js