Webpack_html/css_WEB-ITnoseの基本的な使い方

この記事では、Webpack の基本と例を体験します。

■ Webpack とは? エクスペリエンス● オンデマンドでロード

● キャッシュフレンドリー

● Webpack プラグインをビルドプロセスに挿入可能

■ Webpack を初めて使用する場合は、CLI、つまりコマンドラインインターフェイスを使用します

→ NodeJSがインストールされているか確認

npm - v

→ Webpackをインストール

npm install webpack -g

→ 簡単なWebサイトを作成
....webpacktest/
.....app。 js
..... .index.html

→ webpacktest があるフォルダーに移動します

→ app.js ファイルに webpack

webpack を使用します ./app.js Bundle.js

→ わかりますwebpacktest ディレクトリに追加の Bundle.js ファイルを追加→ これで、app.js ファイルの代わりに、index.html で Bundle.js ファイルを参照できるようになります

■ プロジェクトに設定ファイルを追加します

→ プロジェクトのルートディレクトリに webpack.config.js という名前のファイルを作成します
webpack.config.js ファイルを設定した後は、プロジェクトに移動するたびに、webpack コマンドを使用するだけでさまざまな機能を使用できます。
module.exports = {
エントリ: "./app.js",
出力: {
ファイル名: "bundle.js"
}
}
→ コマンドラインで Webpack が必要な Web サイトにアクセスします

→ webpack コマンドを直接実行する

webpack

■ Webpack オブザーバー モードを有効にする

webpack.config.js の設定が変更された場合、webpack コマンドを手動で入力して js ファイルを生成する必要がある場合、比較的面倒になります毎回。 Webpack はオブザーバー モードを提供します。これを有効にすると、webpack.config.js の変更が監視され、最終的な js ファイルが自動的に生成されます。



→ コマンドラインから Webpack が必要な Web サイトに移動します
→ オブザーバー モードを有効にする
webpack --watch
→ webpack.config.js に watch フィールドを追加し、true に設定します

module.exports = {

エントリ: "./app.js",

出力: {

ファイル名: "bundle.js" }, watch: true

}

→ このようにして、各変更は参照ファイルを webpack.config.js に保存します。 Bundle.js ファイルは自動的に更新されます。

■ Webpack DevServer をインストールして有効にする

→ 対象の Web サイト ディレクトリに移動します
→ npm コマンドを入力して Webpack DevServer をインストールします
npm install webpack-dev-server -g
→ webpack-dev- を入力しますサーバーコマンド
webpack-dev-server
→おおよそ以下の内容を参照してください
http://localhost:8080/webpack-dev-server
webpackの結果は/から提供されます
コンテンツはD:...

Hash:から提供されます。 ..

バージョン: webpack1.12.4
時間: 94ms...webpack: バンドルが有効になりました。

→ ブラウザに次のように入力します: http://localhost:8080/webpack-dev-server/

コンソールも表示しますapp.js ファイル内の .log と document.write の内容。

→ webpack.config.js の依存ファイルを変更して保存すると、ブラウザーの内容が自動的に更新されます

→ console.log の内容を表示したくない場合はどうすればよいですか?
→ ブラウザに http://localhost:8080/ と入力
→ この時、webpack.config.js内の依存ファイルを修正して保存するとブラウザの内容は更新されないのですが？
→ 再度コマンドラインに戻り、インラインフラグを追加
webpack-dev-server --inline
→ この時、webpack.config.js内の依存ファイルを修正して保存すると、ブラウザ内の内容が自動的に更新されます☺




■ 複数ファイルのバンドル




→ プロジェクト配下に別のlogin.jsファイルを追加

console.log('loginloaded');

→ アプリ内でlogin.jsファイルを参照.js
require('./login');

document.write("ビッグヘアコンサートへようこそ!!ベイビー");
console.log('アプリがロードされました');
→ ブラウザに次のように入力します: http: // /localhost:8080/

変更が確認できます。

→ プロジェクトの下に別の utils.js ファイルを追加します

console.log('logging from the utils.js file...');

→ webpack.config.js に移動し、次のように設定します: module.exports = { エントリ: ["./utils","./app.js"],

出力: {

ファイル名: "bundle.js"

},

watch: true
}
→ 現在のプロジェクトへのコマンド ライン ナビゲーション
→ Webpack DevServer を再度有効にする

webpack-dev-server

→ 対応する変更が http://localhost:8080/
に反映されます


■ 例




→ デモという名前のフォルダーを作成します

→コマンドラインからデモフォルダーに移動します

→ package.json ファイルを作成します

npm init
その後、コマンド ウィンドウにさまざまな情報を入力するか、Enter キーを直接押して確認し、最終的にデモの下に package.json ファイルが作成されます。

{
"name": "demo",
"version": "1.0.0",
"description": "デモに関する説明",
"main": "index.js",
"scripts" : {
"test": "echo "エラー: テストが指定されていません" && exit 1"
},
"author": "Darren",
"license": "ISC"
}

→ は現在のデモですプロジェクト webpack を作成します

npm intall webpack --save-dev

正常に実行された後

● デモフォルダーの下に追加の node_modules フォルダーがあります
● package.json に追加の webpack 構成があります

{
"name" : "demo",
"version": "1.0.0",
"description": "デモに関する説明",
"main": "index.js",
"scripts": {
"test": " echo "エラー: テストが指定されていません" && exit 1"
},
"author": "Darren",
"license": "ISC",
"devDependency": {
"webpack": "^1.12.5 "
}
}

これで、現在のデモ プロジェクトのコマンド ライン ウィンドウでさまざまなコマンドを使用できるようになります。

→ 次のコマンドを入力して webpack のコマンド構文を表示します

webpack -h

→ デモの下に webpack.config.js ファイルを作成します

module.exports = {
エントリ: './main.js' ,
出力 : {
filename: 'bundle.js'
}
};

→ デモの下に main.js を作成します

document.write("Webpack for the win!");

→ デモの下で webpack コマンドを実行します

webpack

正常に実行され、デモの下に追加の Bundle.js ファイルが存在します。

→ デモの下にindex.html

を追加します

Webpack Demo

→ デモの下に Second.js を作成

module.exports = document.write( "ああはい、別のファイル");

→ main.js で Second.js ファイルを参照します

require('./second.js');
document.write("Webpack for the win!");

→ 使用します現在のデモ プロジェクト

webpack

の webpack コマンドを実行すると、 Second.js ファイルが Bundle.js ファイル内で参照されていることがわかります。

→ 現在のデモ プロジェクトで webpack -p コマンドを使用します

webpack -p

このようにして、bundle.js ファイルのコンテンツが圧縮されます。

→ 現在のプロジェクトにローダーを追加します

さまざまなローダーはここにあります: http://webpack.github.io/docs/list-of-loaders.html

たとえば、CoffeeScript ローダーを追加します

npm install Coffee-ローダー - -save-dev

正常に実行された後。

● node_modules フォルダーの下に追加の Coffee-loader サブフォルダーがあります。
● package.json にはコーヒーローダーに関連する設定がさらにあります

{
"name": "demo",
"version": "1.0.0",
"description": "デモに関する説明" ,
"main": "index.js",
"scripts": {
"test": "echo "エラー: テストが指定されていません" && exit 1"
},
"author": "Darren",
" ライセンス": "ISC",
"devDependency": {
"coffee-loader": "^0.7.2",
"coffee-script": "^1.10.0",
"webpack": "^1.12. "
}
}

● webpack.config.js にコーヒーローダー関連の

を追加します

module.exports = {
エントリ: './main.js',
出力: {
ファイル名: 'bundle.js '
},
module: {
ローダー: [
{ test: /.coffee$/, ローダー: "coffee-loader" }
]
}
};

デモの下に third.coffee ファイルを追加します。

アラート「webpack がボスです!」

main.js 内の third.coffee ファイルを参照します。

require('./second.js');
require("./third.coffee");
document.write("Webpack for the win!");

bundle.js で webpack コマンドを実行しますthird.coffee ファイルに関連するその他のコンテンツです。

→ CSS と画像を追加します

コマンドラインでデモフォルダーに移動し、次のように実行します:

npm install style-loader css-loader url-loader --save-dev

操作が成功すると、 node_modules の詳細 css-loader、style-loader、および関連する設定も package.json に追加されます:

{
"name": "demo",
"version": "1.0.0",
"description": "デモに関する説明",
"main": "index.js",
"scripts": {
"test": "echo "エラー: テストが指定されていません" && exit 1"
},
"author": "Darren",
"license": "ISC",
"devDependency": {
"coffee-ローダー": "^0.7.2"、
"コーヒースクリプト": "^1.10.0"、
"css-loader": "^0.22.0"、
"スタイルローダー": "^0.13.0 ",
"webpack": "^1.12.5"
}
}

在webpack.config.js中に追加如下構成：

module.exports = {
エントリ: './main.js',
出力: {
path: './build', // ここに画像と js が移動します
publicPath: 'http://yoururl.com/', // これは URL の生成に使用されます
filename: 'bundle.js '
},
モジュール: {
ローダー: [
{ テスト: /.coffee$/, ローダー: "coffee-loader" }，
{ テスト: /.css$/, ローダー: 'style-loader!css-ローダー' },
{ test: /.(png|jpg)$/, ローダー: 'url-loader?limit=8192'}
]
}
};

注意、出力中、ビルド用に保存します生成された Bundle.js および画像ファイル。publicPath は、ウェブサイトのアクセス場所を保存するために使用されます。

index.html ファイル内の参照経路を変更します。 src="./build/bundle.js">

Webpack デモ

デモの下にimage.coffeeファイルを追加します。

img1 = document.createElement("img")

img1.src = require("./your-small-image.png")
document.body. appendChild img1

img2 = document.createElement("img")
img2.src = require("./your-big-image.png")
document.body.appendChild img2

main.js中に追加require( "./image.coffee")

require('./second.js');

require("./third.coffee");

require("./image.coffee");

document.write( "Webpack for the win!");

デモ下创建styles.css文件。

body {

背景: トマト;
}

main.js中に追加require("./styles.css")

require('./second.js');

require("./third.coffee");

require("./image.coffee");

require("./styles.css")

ドキュメント.write("Webpack for the win!");

実行webpackコマンド。