Webpackパッケージ第1節

nodeをインストールします.jsグローバル環境のインストール

cmd    
cd react //  react  
mkdir webpack-demo //  webpack-demo
cd webpack-demo //   webpack-demo  
npm init    
npm install webpack --save-dev//  webpack 

プロジェクトに入ってhelloを新規作成します.jsファイル

function hello(str){
  alert(str);
}

コマンドページに戻る

webpack hello.js hello.bundle.js// hello     hello.bundle.js  
*     webpack          *
    ：
npm //  npm      
npm install webpack -g//     webpack

プロジェクトの新しいstyleに進みます.cssファイル、hello.jsでの参照

require ('./style.css');// hello.js   CSS  
webpack hello.js hello.bundle.js//      
*      need an appropriate loader to handle this file*
npm install css-loader style-loader --save-dev//     css style-loader
*             *
require ('css-loader!./style.css')//                  css-loader  
**      **

プロジェクトにindexを新規作成します.htmlファイル、scriptラベルを使用してhello.bundle.js導入、helloを再パッケージ.jsファイル、HTMLファイルを実行するとhello.jsのファイルの内容が実行されます.次にcssファイルにスタイルを追加します.

body{background:red;}
    webpack hello.js hello.bundle.js
  index.html  ，   
require (style-loader!css-loader!./style.css)

css-loaderはwebpackをCSSスタイルに使用できるようにし、style-loaderはcssファイルをHTMLファイルにstyleスタイルラベルを挿入できるようにする####

ただし、一般的にはrequire(style-loader!css-loader!./style.css)ではなく、require(./style.css)を使用してコマンドラインで指定し、コマンドラインツールにwebpack--helpを入力してパラメータ設定を表示します.Webpack helloを入力します.js hello.bundle.js --module-bind "css=style-loader!css-loader".Webpack helloを入力します.js hello.bundle.js--module-bind「css=style-loader!css-loader」はコマンドラインで指定します.Webpack helloを入力します.js hello.bundle.js--module-bind「css=style-loader!css-loader」--watchファイルの変更は、バインドするたびに自動的に更新されます.

*webpack   *
--watch       
--progress        
--display-modules        
--display -reasons         
---------------------------------------------------------------------------------------
--progress          ，  ctrl+c  

over