switching to webpack--初探webpack

6966 ワード
webpack入門
現在、次のようなファイル構造があるとします.
index.html
master.css
rotate.js
index.htmlでは、残りの2つのファイルを導入しました.今、webpackを利用してパッケージ化したいと思います.cssとjsを1つのファイルに入れると、index.htmlに1つのファイルを導入するだけでいいです.
index.html

  
  
  wp

どうしますか.まず、cssとjsを し、entry.jsで1つのファイルindex.htmlだけを するエントリファイルentery.jsを します.entery.jsでjsとcssをどのように しますか?
index.html

  
  
  wp
  

//entry.js
require('./rotate.js');
require('./master.css');

まず npm install webpack --save-devを り けてwebpack entry.js bundle.jsを します.エラー:masterを します.cssの は した.これはnodeのモジュールシステムではjsファイルのみがrequire で できるため,css は する.どうしようかな?Webpackにはjs のファイルの を に するloaderツールがあります. が すように、loaderは のフォーマットを するファイル、CoffeeScript、JSX、LESS、JSONなどをロードします.もしあなたがSASSを いているならば、 じようにenter.jsに した 、index.htmlは できませんが、loaderは にあなたが いたSASSをcssに してから することができます.これにより、SASSを いてgulpやgruntなどのツールでcssに し、loaderで する はありません.
さあ、どう きますか.まずnpmを ってcssとstyleのloaderをダウンロードします.npm install style-loader css-loaderは、その 、entry.jsでcssをこのように することができる.
//entry.js
require('./rotate.js');
require('!style!css!./master.css');
webpack entry.js bundle.jsの に し、ページをリフレッシュすると、css、jsが されていることがわかりました.OKですから、 する があるファイルがたくさんある は、まずentry.jsに し、index.htmlにentry.jsを すればいいです.このように すると、webpackは たちがheadに する があるファイルをentry.jsに しただけで、それはいったいどんなメリットがありますか?
したように、webpackはloaderを して なファイルを することができ、 するloaderをダウンロードするだけでこれらのステップを することができます.これらはより に する がありますので、webpackタスクを してwebpack.config.jsを します.
module.exports = {
  entry: '/entry.js', //      
  output: {
    path: __dirname,
    filename: 'bundle.js' //         
  },

  module: {              //         module 
    loaders: [
      { test: /\.css$/,       //    
        loader: 'style!css',  //   css   
        include: paths        //      ，         test   ，      
      }
    ]
  }
}
webpack.config.jsを したら、webpackを するだけで、 webpack entry.js bundle.jsを したような が られます.さらに、entry.jsにおけるcssの は、jsファイルを するように!style!css!のような を する がなくなるように くこともできる.
//entry.js
require('./rotate.js');
require('./master.css');
rotate.jsにもう つのjsファイルやモジュールをインポートした 、webpackもそれを します.Webpackはrequireのファイルだけをインポートするだけでなく、requireファイル のすべての も するという です. えば、 はrotate.jsでjqueryを って、 はrotateだけを とします.jsにはさらにrequire('./jquery.js')でいいです. を き を く.
Webpackが な で するテクニックを に しましたが、これらのテクニックは の ツールを しても できることがわかります.あまり が がらなかった.はい、 なファイル では、webpackの はまだ れません.しかし、 なプロジェクトではファイルレベルのネストが く、 に するのが で、さまざまなライブラリへの が と します.この 、webpackがもたらすこのようなモジュール モデルは に ちます. ファイルの を で する はありません. するときはrequireですぐにokになります.
では, に された さなプロジェクトから,webpackがもたらすいくつかの を した.この ではloaderを く り こし、loaderが たちに をもたらすかを てみましょう.
の で したように、webpackではnodejsのようにモジュール で jsファイルを することができるが、1つのフロントエンドプロジェクトではjsファイルだけでなく、CoffeeScript、 JSX、 LESS、JSON、SCSS、JPG、PNGのファイルがnodeのモジュールシステムを して できない があり、loaderはこのような を するために ている-- の のファイルをjsのように するには、 なloaderが である.loaderは にモジュールでもあり、その は をnodejsに なモジュールに することであり、 の を なモジュールにすることである.
の ディレクトリは のとおりです.
index.html
master.scss
rotate.js
entry.js

scssファイルが するためhtmlはscssを できません.scssをコンパイルする があります. の はgulpまたはgruntを いてmaster.scssを にコンパイル し、index.htmlに されるが、loaderの はこれらのステップを し、scssファイルをモジュールの で することができると、gulpにおける.pipe(sass())のようにモジュールの でコンパイルすることができるが、これはよりストリームの え に する. の はありません.destファイルはcssにコンパイルしたscssファイルを する はありません.ファイルはこの3つのファイルですが、loaderを して くの を くことができます.OK、 から めます.
まずsassのsass-loader,npm install sass-loader node-sass --save-dev,entry.jsをダウンロードする があります.
require('!style-loader!css-loader!sass-loader! ./master.scss');
require('./rotate.js')

cssを するようにentry.jsにrequire(./scss)を くことはできないことを した(sass-loaderドキュメントでは、このようなより な き は されていない).webpack.config.jsでsass-loaderを 
{test: /\.scss$/, loader: [ 'style', 'css', 'sass' ]},

OK,webpackを し,index.htmlを くとscssに かれたスタイルが に したことが かった. です.
jsではES 6 を っていますが、ES 5にコンパイルされる があります.どうすればいいですか?やはりloaderです.babel-loader,npm install babel-loader babel-core babel-preset-es2015 --save-dev,webpack.config.jsに 
{  test: /\.js$/,
   exclude: /(node_modules|bower_components)/,
   loader: 'babel-loader',
   query: {
     presets: ['es2015']
   }
}

OK,scss,es 6ともにコンパイルに された. 、 する があるの?(loaderの はその の り、 にリソースをモジュール している) 、lint、ピンイン などの には のツールが です--plugins.
このセクションでは、 にloaderが した りのタスクを するwebpackのpluginsについて します.Webpackにはすでにいくつかのプラグインが されています.よく られるのはuglifyjs jsファイルです.これはwebpack のプラグインです.pluginsを せずにwebpack -pを してbundle.jsを することもできます.pluginsを してからwebpackを して を することもできます.
に、webpack.config.jsファイルにwebpack const webpack = require('webppack') pluginsオプションをインポートします.webpackを すると、ファイルサイズが されていることがわかります.
plugins: [
  new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false  //   true           
    },
    mangle: true      //   true            
  })
]

な はこれらで、 の さなプロジェクトから め、 の な からwebpackモードに り えました.ワークフローの え が になり、gulpよりもwebpackがスムーズになりました.もちろん、これは な まりにすぎません.モジュールのオンデマンドロード、 け ロード、ホット 、リリースなどの なテクニックは、より くの が です.もっと するにつれて、あなたは「webpackが たちに をもたらしたのか」と じています.もっと な えがある.
リソースを ぶ:
webpack
webpack
webpack
Visual C#によるWindowsパイピング技術の実現
asp.Nettreeview非同期ロード