私は、jqueryとbootstrapを使用した既存のPHPプロジェクトを持っており、フロントエンドフレームワークは使用していません。
私は、プロジェクトのリソースのための単一のエントリポイントを作成し、node jsパッケージマネージャでjsの依存関係を管理し、minify js css、画像のリサイズ...などのタスクを実行するために、webpackモジュールバンドルを使ってみています。そして、1つのページを読み込むのに必要なブラウザのロード時間を改善します。
私はwebpackのチュートリアルに出会い、それをインストールし、その開発サーバーをインストールするようになりましたが、問題は、私がプロジェクト内の現在のすべてのjsスクリプトとCSSリンク(プロジェクト内の複数の機能を提供するために使用される多くのjqueryとCSSライブラリがある)をwebpackを使用するように変換する方法を理解することができないことである。
**私のJSとCSSファイルをすべてwebpackに合うように書き直さなければならないのでしょうか?どうすればうまく移行できますか?
Besides, I am not able to run my current php application on the webpack dev-server, is it meant to run there in the first place in the first place?とりあえずプロジェクトのディレクトリをリストアップしているだけなのですが...。
私はテスト用の index.js
ファイルを作成し、以下の webpack 設定を使用しました。
var path = require('path');
var webpack = require('webpack');
module.exports =
{
entry: [
'./public/js/index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080'
],
plugins: [
new webpack.HotModuleReplacementPlugin()
],
output: {
path: path.join(__dirname, "public/dist/js"),
publicPath : "http://localhost:8080/my_proj/public/dist/js",
filename: "bundle.js"
}
};
webpack dev-server 上でアプリケーションが動作することを期待して、以下のようにテスト用に bundle.js
をスクリプトロードに追加してみました。
<script type="text/javascript" src="public/dist/js/bundle.js"></script>
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/jquery.migrate.js"></script>
<script type="text/javascript" src="public/js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="public/js/jquery.appear.js"></script>
<script type="text/javascript" src="public/js/jquery.countTo.js"></script>
<script type="text/javascript" src="public/js/bootstrap.js"></script>
**ここで概念を理解し、どのように私はこの移行を成功させることができます助けてください?
まず、あなたの小さな質問に答えます。
免責事項: 私はあなたの質問のほんの一部を引き受けるだけです。その範囲はあまりにも広すぎて、StackOverflowの回答1つにまとめることはできません。 私は以下のことにしか触れません。
Node.jsとnpmがあなたのマシンにインストールされており、その使い方を大体知っているものとします。
また、webpack
と webpack-cli
がプロジェクトの(dev)依存ライブラリとしてインストールされているものとします(グローバルにインストールされている必要はありません)。
npm install --save-dev webpack webpack-cli
Update: この回答の以前のバージョンでは、
webpack-cli
をインストールする必要はありませんでした。バージョン4(2018年2月)より、webpack'のCLIは独自のパッケージに存在し、そのため追加のパッケージが必要です。開発と本番のワークフローをセットアップする
通常、開発と本番では異なることを行いたいものです(本番でminify、開発でlive-reloading、...)。 これを実現するために、設定ファイルを分割する必要があります。
ディレクトリ構造を準備する
質問で出てきたwebpackの設定を無視することに同意しましょう。どうせほとんどすべてを変更しなければならないので、一からやり直します。 まず、プロジェクトルートに
build
フォルダを作成します。プロジェクトのルートフォルダを設定ファイルで汚染したくないので、ビルド関連のものはそこに入れることになります。(このフォルダに別の名前をつけるのは自由ですが、このチュートリアルの間はその名前を覚えておいてください)。 そのフォルダの中にconfig.base.js
,config.production.js
,config.development.js
ファイルを作成します。 これで、2つのビルドチェーン用の設定ファイルができました。しかし、設定ファイルはまだ空っぽです。
webpack-merge
をインストールするしかし、その前に
webpack-merge
をインストールする必要があります。
npm install --save-dev webpack-merge
このパッケージは、複数の webpack 設定を深くマージすることができます。今回は、現在の環境に応じて webpack の設定を作成するために使用したいと思います。
ここで build/config.base.js
を調整します。
module.exports = {
// We'll place webpack configuration for all environments here
}
このファイルは、今は明らかに空のオブジェクトをエクスポートしているだけですが、次のステップでそれが必要になります。
次のコードを build/config.production.js
に記述してください。
const merge = require('webpack-merge')
module.exports = merge(require('./config.base.js'), {
mode: 'production'
// We'll place webpack configuration for production environment here
})
そして、ほぼ同じコードを build/config.development.js
に記述します。
const merge = require('webpack-merge')
module.exports = merge(require('./config.base.js'), {
mode: 'development',
watch: true
// All webpack configuration for development environment will go here
})
これが何をするものかは直感的にわかると思います。
webpack を config.development.js
の構成で使用すると、共通の構成を取得し、独自の構成宣言をマージしてくれます。
Update: 上記設定ファイルの
mode
オプションは、webpack 4 (2018年2月リリース) で追加されました。これは、開発用バンドルと本番用バンドルに対して、賢明なデフォルトの束を設定します。 これで処理を実行すると、コマンドラインから次のようになります。
npx webpack --config build/config.development.js
# If the above doesn't work, you probably have an older version of npm (< 5.1) installed
# While npx is a really great tool, you can of course still call the path of the webpack executable manually:
node_modules/.bin/webpack --config build/config.development.js
...そして、production
環境ではその逆です。
このコマンドはかなり使いにくいですが、心配いりません、後で対処します。
簡単に交換できるようにするために、一元管理したい情報があります。ファイルパスがそれです。では、それを抽出してみましょう。
buildフォルダに
paths.js` を作成し、後で使いたいパスをいくつか書き出すようにします。
const path = require('path')
// I'm really just guessing your project's folder structure from reading your question,
// you might want to adjust this whole section
module.exports = {
// The base path of your source files, especially of your index.js
SRC: path.resolve(__dirname, '..', 'public'),
// The path to put the generated bundle(s)
DIST: path.resolve(__dirname, '..', 'public', 'dist'),
/*
This is your public path.
If you're running your app at http://example.com and I got your DIST folder right,
it'll simply be "/dist".
But if you're running it locally at http://localhost/my/app, it will be "/my/app/dist".
That means you should probably *not* hardcode that path here but write it to a
machine-related config file. (If you don't already have something like that,
google for "dotenv" or something similar.)
*/
ASSETS: '/dist'
}
上記のように、技術的にはこのように development
モードでビルドチェーンを実行することができます。
npx webpack --config build/config.development.js
しかし、これは不快なほど冗長なコマンドなので、これを変更しましょう。
npmスクリプトを使用してビルドプロセスを実行する方がずっと便利です。環境ごとに1つのスクリプトを
package.json` に以下のように追加してください。
{
"scripts": {
"dev": "webpack --config build/config.development.js",
"prod": "webpack --config build/config.production.js"
}
}
これで、ビルドチェーンを npm run dev
や npm run prod
で実行することができるようになります - この方が覚えやすく、入力も速くなります。
...もちろん、ビルドするものがあればすぐに実行します。
さて、ここまではあまり成果がないまま、実は結構な量の作業でした。 では、もっとエキサイティングなことから始めましょう。JavaScriptのエントリーポイントを定義します。
以下のコードを build/config.base.js
に記述します(既存のコードを完全に置き換えます)。
const path = require('path')
const { SRC, DIST, ASSETS } = require('./paths')
module.exports = {
entry: {
scripts: path.resolve(SRC, 'js', 'index.js')
},
output: {
// Put all the bundled stuff in your dist folder
path: DIST,
// Our single entry point from above will be named "scripts.js"
filename: '[name].js',
// The output path as seen from the domain we're visiting in the browser
publicPath: ASSETS
}
}
上記の設定では、(build/paths.js
で定義された)SRC/js
フォルダに index.js
が存在することを想定しています。
そのファイルを以下の内容で作成しましょう。
import './jquery.min.js'
import './jquery.migrate.js'
import './jquery.bxslider.min.js'
import './jquery.appear.js'
import './jquery.countTo.js'
import './bootstrap.js'
ご覧の通り、index.js
は使いたいファイルを全てインポートしているだけです。
もし、今、あなたが
npm run prod
をターミナルから実行すると、 DIST
フォルダに scripts.js
ファイルが作成されます。このファイルをマークアップにインクルードするには、通常の <script>
タグを使用します。
おめでとうございます、これで webpack のセットアップは完了です。
このミニチュートリアルは、webpackでできることのほんの一部に過ぎません。このミニチュートリアルでは、webpack でできることのほんの一端を紹介しましたが、これで設定の基礎はかなり固まりました。そして、それは実際には非常に多くのものになるでしょう。 これから、あなたが強化したいと思うようなことを、いくつかのリンクとともにリストアップしていきます。
webpackを使おうと思っても、その根底にあるコンセプトを知らなければ難しいかもしれません。Juho Vepsäläinen はwebpackを始めるための素晴らしいガイドを作成しており、私はとても助けられました。彼はwebpackのコアコントリビューターでもあるので、彼が何を話しているのかを知っていることは確かです。 特に ローダ は、あなたが本当に知る必要のある概念です。 このリストのヒントの多くも、そこで説明されています。 続きを読むSurviveJS - webpack チュートリアル
これは名前の通りです。すべてのJavaScriptを1つの巨大な出力ファイルにまとめたくはないでしょう。 アプリケーションの特定のページにのみ必要なバンドル部分を分割するのは、webpackが行う仕事です。 また、プロジェクトのJavaScriptを扱う頻度によっては、キャッシュのためにサードパーティのコードをバンドルから切り離すのも良いアイデアかもしれません。 詳しくはこちら。webpack ドキュメント - コードの分割
バンドルされたファイル名に、内容に応じたハッシュを追加することで、サイトのキャッシュ機能を強化することができます。これにより、(例えば)scripts.js
の代わりに script.31aa1d3cad014475a618.js
を作成することができます。
このファイルは、内容が変更されるとすぐにファイル名も変更されるので、無期限にキャッシュすることができます。
PHPコードは生成されたファイル名にアクセスするために、 webpack-manifest-plugin
を使用するかもしれません。
もっと読む
chunkhash
ハッシュを使用してバンドルファイル名をリッチにする方法についてwebpack-manifest-plugin
現在のバンドルのファイル名を含む manifest.json
を生成する方法について。あなたのサイトのJavaScriptで最新のES2015コードを使いたい場合(そして非エバーグリーンブラウザをターゲットにしている場合)、それらを通常のES5にトランスパイルしたいと思うでしょう。(もし、ES2015という用語が何の意味もなさないのであれば、あなたはそれを使っていない可能性が高いので、このパラグラフは無視してかまいません)
もっと読む。babel-loader
- あなたのスクリプト上でBabelを実行するローダー
CSSのためのwebpackローダーがあります。Sassも。そしてPostCSS。あなたが必要とするものは何でもです。
そして、おそらくCSSを <script>
タグでインクルードするつもりはないでしょうから、実際の .css
ファイルを生成する Extract Text Plugin を知っておいてください。
このプラグインを使うと、実際の.cssファイルを生成することができます。しかし、これは一種のハックです。このプラグインは、webpackがJavaScriptしかターゲット言語としていないにもかかわらず、.css
ファイルを生成します。
しかし、webpack 4では、これはもはや真実ではありません。CSSを含む任意のモジュールタイプを定義することができるようになりました。
長文になりますが、 Webpack のネイティブ CSS サポートが Extract Text Plugin を置き換える日が近いと予想されます。
ヒント: パス
webpackがどのように機能するかを理解するまで、これは私にとって本当に痛いポイントだったので、このことについて触れておきます。 webpackは
url(...)
ステートメントを認識し、ソースファイルからの相対パスで解決しようとすることに注意してください。 つまり、ソースファイルpublic/css/main.css
:
body {
background: url('../img/bg.jpg');
}
出力パスが public/dist/css/bundle.css
である場合、次のように変換されます。
body {
background: url('../../img/bg.jpg');
}
続きを読む
extract-text-webpack-plugin
Update: 2018年2月にwebpack 4がリリースされたため、このセクションはかなり時代遅れになっています。新しい
mode
オプションを"production"
に設定すると、自動的に JavaScript の minification が適用されるようになりました。 webpackにはJavaScriptをminifyするためのTerserというプラグインがあります。CSSのminifyは、上記のcss-loader
プラグインにすでに組み込まれている機能です。 続きを読む[Terser webpack Plugin】(https://www.npmjs.com/package/terser-webpack-plugin)画像の最適化
webpackはバンドルであり、タスクランナーではありません。したがって、画像の最適化は本物のwebpackのタスクではありません。おそらく実際のタスクランナーを使うか、このためにいくつかの
npm
スクリプトを定義した方が良いでしょう。 しかし、webpackにこのような機能がないわけではありません。プラグインもたくさんあります。 もっと読む。
webpackの開発サーバーは、静的ファイルのみを提供するシンプルなNode.jsサーバーです。
あなたの場合、webpack-dev-server
はおそらく全く間違ったツールです。代わりに webpack-livereload-plugin
を使えば、<script>
タグでインクルードするだけでライブリローダを実行できます。
もっと読む。webpack-livereload-plugin
Update: webpack 4(2018年2月リリース)より、新しい
mode
オプションを"development"
に設定すると、ソースマップが自動生成されるようになりました。 ぜひ、ソースマップを使いましょう。バンドルでの作業が泣きたくなるくらい楽になりますよ。 もっと読むwebpack ドキュメント - ソースマップエッジケース
通常、webpackで処理する既存のスクリプトはすべて問題なく動作しているはずです。 今、私の頭に浮かんでいる唯一の例外は、グローバルエンティティに関するものです。 以下のコードを見てください。
function myFunc () {
console.log('I exist!')
}
このコードをプレーンなJavaScriptファイルに記述すると、JSコードのあらゆる場所で myFunc
を利用できるようになります。しかし、webpack のバンドルコードはコールバック関数の内部でラップされるため(つまりグローバルスコープから離れる)、その関数にアクセスすることはできなくなります'。
サードパーティのライブラリは通常 window
オブジェクトに直接グローバルを割り当てるので問題ありませんが、もしプロジェクトですでに JS コードを書いている場合は、その点に注意する必要があります。
npm run prod
を実行することを検討してみてください。これがお役に立てれば幸いです。
既存のvue-templatesと@Loiloからの回答に基づいて、vue-cli
でインストールできるvueテンプレートを作りました。このテンプレートは、既存の環境で拡張したり、統合したりできるvueアプリケーションのためのジャンプスタートです。
npm install -g vue-cli
vue init delcon/webpack-simple my-project
cd my-project
npm install
devwatch:
このテンプレートには、webpack-dev-server を使う代わりに、ファイルの変更を監視する devwatch の実行オプションが追加されています。これにより、既存のウェブサーバ環境でも使用できるようになります。
npm run devwatch
dev:
デフォルトのwebpack-dev-serverで実行するには、index.html
内の <script src="http://localhost:35729/livereload.js"></script>
を削除してください。
npm run dev
ビルド:
を実行して、プロジェクトを実稼働用にビルドします。
npm run build