Webpack 2入門+ケース
2836 ワード
WebpackはJavaScriptアプリケーションモジュールパッケージです.Webpackは、アプリケーション依存グラフを迅速に作成し、正しい順序でパッケージ化することで、ワークフローを簡素化します.生産環境のためにvendor/css/jsコードを分割し、リフレッシュホットロード(hot-reload)がないなど、あなたのコードに対してwebpackをカスタマイズすることができます.
Webpackはmodule依存関係パッケージjs,css,pngなどのページ初期ロード時間を低減して第三者コンポーネントライブラリを組み合わせて異なる構文を標準構文に変換してインストールすることができます.ここではwebpack 2.4.1バージョンを使用しています.
グローバルインストール
Webpackはmodule依存関係パッケージjs,css,pngなどのページ初期ロード時間を低減して第三者コンポーネントライブラリを組み合わせて異なる構文を標準構文に変換してインストールすることができます.ここではwebpack 2.4.1バージョンを使用しています.
グローバルインストール
npm install -g webpack
ローカルインストール
npm install--save-dev webpack小さな例アプリケーションを作成しインストールするために必要な依存ライブラリ$mkdir webpack-demo$cd webpack-demo$npm init-y$npm install--save-dev webpack$npm install--save-dev css-loader$npm install--save-dev install--save-dev style-loader$npm install--save-dev extract-text-webpack-pugin$npm install webpack-depm install v-serverエントリ(index.js)import'./style.css'; content = require("./content.js")
var element = document.createElement('message'); element.innerHTML = content; document.body.appendChild(element); カスタムモジュール(content.js)module.exports = "It works from content.js!!!"; css (style.css) body { background: grey; } htmlページ(index.html)
webpack構成
module.exports = {
entry: "./index.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
rules: [{
test:/.css$/,
use: [ 'style-loader', 'css-loader' ]
}]
}
};
パッケージ生成bundle.jsファイル
$ webpack
Hash: 62f1078175b4dbbd7d46
Version: webpack 2.4.1
Time: 368ms
Asset Size Chunks Chunk Names
bundle.js 19.1 kB 0 [emitted] main
[0] ./content.js 48 bytes {0} [built]
[1] ./style.css 992 bytes {0} [built]
[2] ./index.js 171 bytes {0} [built]
[3] ./~/css-loader!./style.css 192 bytes {0} [built]
[4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
[5] ./~/style-loader/addStyles.js 9.15 kB {0} [built]
[6] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]
npm install--save-dev webpack小さな例アプリケーションを作成しインストールするために必要な依存ライブラリ$mkdir webpack-demo$cd webpack-demo$npm init-y$npm install--save-dev webpack$npm install--save-dev css-loader$npm install--save-dev install--save-dev style-loader$npm install--save-dev extract-text-webpack-pugin$npm install webpack-depm install v-serverエントリ(index.js)import'./style.css'; content = require("./content.js")
var element = document.createElement('message'); element.innerHTML = content; document.body.appendChild(element); カスタムモジュール(content.js)module.exports = "It works from content.js!!!"; css (style.css) body { background: grey; } htmlページ(index.html)
webpack構成
module.exports = {
entry: "./index.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
rules: [{
test:/.css$/,
use: [ 'style-loader', 'css-loader' ]
}]
}
};
パッケージ生成bundle.jsファイル
$ webpack
Hash: 62f1078175b4dbbd7d46
Version: webpack 2.4.1
Time: 368ms
Asset Size Chunks Chunk Names
bundle.js 19.1 kB 0 [emitted] main
[0] ./content.js 48 bytes {0} [built]
[1] ./style.css 992 bytes {0} [built]
[2] ./index.js 171 bytes {0} [built]
[3] ./~/css-loader!./style.css 192 bytes {0} [built]
[4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
[5] ./~/style-loader/addStyles.js 9.15 kB {0} [built]
[6] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]
実行後にbundleが生成することがわかる.jsファイル.jsとcssがすべて含まれています.
ブラウザでindexに直接アクセスする.htmlファイルは結果を表示します.
ホットデプロイ
ローカルホットデプロイ
第一歩:webpack
$ webpack --watchを起動第2ステップ:コード
を修正する第3部:ブラウザリフレッシュ(アクセスfile:///.../index.html)
サーバのホット・デプロイ
第一歩:webpack-dev-server
$ webpack-dev-serverを起動する第2ステップ:コード
を修正するステップ3:ブラウザのリフレッシュ(アクセス)http://localhost:8000)
ページの自動更新
これまで、jsとcssを変更するたびにブラウザを手動でリフレッシュして結果を見る必要があったが、実際にwebpack-dev-serverは変更するたびに自動的にブラウザをリフレッシュするように起動できるので、試してみよう.次のコマンドを使用してwebpack-dev-serverを起動します:
$ webpack-dev-server --hot --inline
その後jsまたはcssを変更し、保存し、ページが自動的にリフレッシュされるでしょう.