switching to webpack--初探webpack
6966 ワード
現在、次のようなファイル構造があるとします.
どうしますか.まず、cssとjsを し、
まず
さあ、どう きますか.まずnpmを ってcssとstyleのloaderをダウンロードします.
したように、webpackはloaderを して なファイルを することができ、 するloaderをダウンロードするだけでこれらのステップを することができます.これらはより に する がありますので、webpackタスクを して
Webpackが な で するテクニックを に しましたが、これらのテクニックは の ツールを しても できることがわかります.あまり が がらなかった.はい、 なファイル では、webpackの はまだ れません.しかし、 なプロジェクトではファイルレベルのネストが く、 に するのが で、さまざまなライブラリへの が と します.この 、webpackがもたらすこのようなモジュール モデルは に ちます. ファイルの を で する はありません. するときはrequireですぐにokになります.
では, に された さなプロジェクトから,webpackがもたらすいくつかの を した.この ではloaderを く り こし、loaderが たちに をもたらすかを てみましょう.
の で したように、webpackではnodejsのようにモジュール で jsファイルを することができるが、1つのフロントエンドプロジェクトではjsファイルだけでなく、
の ディレクトリは のとおりです.
scssファイルが するためhtmlはscssを できません.scssをコンパイルする があります. の はgulpまたはgruntを いて
まずsassのsass-loader,
cssを するように
OK,
jsではES 6 を っていますが、ES 5にコンパイルされる があります.どうすればいいですか?やはりloaderです.babel-loader,
OK,scss,es 6ともにコンパイルに された. 、 する があるの?(loaderの はその の り、 にリソースをモジュール している) 、lint、ピンイン などの には のツールが です--
このセクションでは、 にloaderが した りのタスクを するwebpackの
に、
な はこれらで、 の さなプロジェクトから め、 の な からwebpackモードに り えました.ワークフローの え が になり、gulpよりもwebpackがスムーズになりました.もちろん、これは な まりにすぎません.モジュールのオンデマンドロード、 け ロード、ホット 、リリースなどの なテクニックは、より くの が です.もっと するにつれて、あなたは「webpackが たちに をもたらしたのか」と じています.もっと な えがある.
リソースを ぶ:
webpack
webpack
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