Webpackインストールとコマンドライン
8876 ワード
1、我々のプロジェクトディレクトリ
このコマンドを実行すると、name、version、descriptionなどを入力するように要求されますが、記入せずに戻ってもいいです.最後に、ディレクトリの下に
2、webpackのインストール
このコマンドの実行が完了すると、
3、牛刀を試してみる(webpackパッケージが何なのか見てみる)
ルートディレクトリの下に
そして私たちはwebpackでこのhelloをパッケージします.jsファイル、パッケージした後に何があるか見てみましょう.コマンドの実行:
上記のパッケージングコマンドが正常に実行されると、端末から次のようなメッセージが表示されます.
パッケージ化されたこの
4、昇格
ルートディレクトリに
Webpacパッケージコマンドを再実行するには、次の手順に従います.
間違いを報告しなかったのに,意外にも間違いを報告しなかった.
5、webpackはどのようにcssファイルを処理しますか?
次に、jsファイルでcssファイルを参照する方法について説明します.
jsファイルでcssファイルを引用できるのは不思議です.やはり私たちは再びwebpackパッケージコマンドを実行して、報告が間違っていることに気づきました.
ヒントによると、cssというタイプのファイルを処理するには適切なloaderが必要です.
6、インストールに必要なloader
実はcss-loaderのほかにstyle-loaderが必要です.それらは一緒に使用されています.
OK、この2つのloaderをインストールしましたが、まだ終わっていません.この2つのloaderを指定する必要があります.
cssファイルを導入するときに、この2つのloaderを指定します.(文法に注意)では、Webpackパッケージコマンドを再度実行すると、エラーは発生しません.
htmlテンプレートファイルを新規作成し、生成した
7、css-loaderとstyle-loader
前にcssファイルを導入したのを覚えていますか?
これは、cssファイルを
8、修正するたびに梱包し直すのは面倒ではないでしょうか.
パッケージ化できるのは、パラメータを追加することです.
上記のコマンドを実行すると、端末が『待機』状態に入っていることに気づき、後でファイルを修正しているので、再度パッケージする必要はありません.これが自動梱包を実現し、
webpack-testに入り、npmを初期化するnpm initこのコマンドを実行すると、name、version、descriptionなどを入力するように要求されますが、記入せずに戻ってもいいです.最後に、ディレクトリの下に
package.jsonファイルが生成されます(このファイルについては説明しません).2、webpackのインストール
npm install webpack --save-devこのコマンドの実行が完了すると、
webpack-testディレクトリの下にnode_modulesフォルダが追加されます.3、牛刀を試してみる(webpackパッケージが何なのか見てみる)
ルートディレクトリの下に
hello.jsファイルを新規作成します.コードは次のとおりです.// ，
function hello(){
alert('hello');
}
hello();そして私たちはwebpackでこのhelloをパッケージします.jsファイル、パッケージした後に何があるか見てみましょう.コマンドの実行:
webpack hello.js hello.bundle.js
#webpack [ ] [ ]上記のパッケージングコマンドが正常に実行されると、端末から次のようなメッセージが表示されます.
Hash: ffb542f388f3028d0787
Version: webpack 2.2.1
Time: 59ms
Asset Size Chunks Chunk Names
hello.bundle.js 2.58 kB 0 [emitted] main
[0] ./hello.js 66 bytes {0} [built]Assetは今回のパッケージ後のファイル名、Sizeは今回のパッケージ後のファイルの大きさ、Chunksは今回のパッケージのブロックを指します.パッケージ化されたこの
hello.bundle.jsファイルを見てみましょう.私たちは理解できないことに気づきました.最後に私たちのhelloがあるだけです.jsのコード:/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
// ，
function hello(){
alert('hello');
}
hello();
/***/ })
/******/ ]);4、昇格
ルートディレクトリに
word.jsを新規作成します.コードは次のとおりです.function word(){
return {}; //
}hello.jsファイルで、このword.jsを参照することを望んでいます.//
require('./word.js')
function hello(){
alert('hello');
}
hello();Webpacパッケージコマンドを再実行するには、次の手順に従います.
webpack hello.js hello.bundle.js間違いを報告しなかったのに,意外にも間違いを報告しなかった.
requireが使えるなんて、原生jsではだめだと知っておく必要があります.5、webpackはどのようにcssファイルを処理しますか?
style.cssファイルを新規作成します.コードは次のとおりです.html,body{
margin: 0;
padding: 0;
}次に、jsファイルでcssファイルを参照する方法について説明します.
//
require('./word.js')
require('./style.css'); // ， js css
function hello(){
alert('hello');
}
hello();jsファイルでcssファイルを引用できるのは不思議です.やはり私たちは再びwebpackパッケージコマンドを実行して、報告が間違っていることに気づきました.
//......
You may need an appropriate loader to handle this file type.
//........ヒントによると、cssというタイプのファイルを処理するには適切なloaderが必要です.
6、インストールに必要なloader
npm install css-loader style-loader --save-dev実はcss-loaderのほかにstyle-loaderが必要です.それらは一緒に使用されています.
OK、この2つのloaderをインストールしましたが、まだ終わっていません.この2つのloaderを指定する必要があります.
require('style-loader!css-loader!./style.css'); cssファイルを導入するときに、この2つのloaderを指定します.(文法に注意)では、Webpackパッケージコマンドを再度実行すると、エラーは発生しません.
htmlテンプレートファイルを新規作成し、生成した
hello.bundle.jsをパッケージ化してテストすることができます.
<html>
<head>
<meta charset="utf-8"
<title>webpack-testtitle>
head>
<body>
<script src="hello.bundle.js">script>
body>
html>7、css-loaderとstyle-loader
前にcssファイルを導入したのを覚えていますか?
require('style-loader!css-loader!./style.css'); これは、cssファイルを
css-loaderで処理し、style-loaderで処理することを意味する.style-loaderはcss-loaderを処理した内容で、新しいラベル(style)を作って、私たちのhtmlテンプレートに挿入します.例えば、前の例では、htmlテンプレートファイルをhelloに導入しています.bundle.jsの後、ブラウザでソースコードを観察すると、htmlのheadラベルに次のコードが多くなることがわかります.<style type="text/css">html,body{
margin: 0;
padding: 0;
}style>8、修正するたびに梱包し直すのは面倒ではないでしょうか.
パッケージ化できるのは、パラメータを追加することです.
webpack hello.js hello.bundle.js --watch上記のコマンドを実行すると、端末が『待機』状態に入っていることに気づき、後でファイルを修正しているので、再度パッケージする必要はありません.これが自動梱包を実現し、