webpack入門日記

3216 ワード
1.webpackをインストールするのはnodeJS環境に依存していますので、webpackをインストールする前に、本機にnodeJSがインストールされていることを確認して、下記のコマンドを実行してグローバル下でwebpackをインストールします.
sudo npm install -g webpack
2.プロジェクトディレクトリへのインストール依存
  • プロジェクトディレクトリで以下のコマンドを実行し、package.json
    • を生成する.
    npm init
  • は、以下のコマンドを実行して、プロジェクトディレクトリに依存
    • をインストールします.
    npm install webpack --save-dev
  • は、以下のコマンドを実行して、プロジェクトディレクトリにwebpack開発ツールをインストールします.(省略可能であれば)
    • npm install webpack-dev-server --save-dev
    3.使用
  • 新規index.ページ
    • 


    
    test
  • jsのエントリファイルentry.js
    • を します.
    document.write("it works");
  • webpackを って、entry.jsを のbundle.jsにコンパイルし、コンパイルが したら、ブラウザでindex.を くと、it works
    • が されます.
    webpack entry.js bundle.js
    4.プロジェクトにモジュールを する
  • しいファイルmodule.js
    • を します.
    module.exports=document.write(" it works from module.js")
  • jsエントリファイルentry.js
    • を します.
    document.write("it works");
document.write(require("./module.js"))
  • コンパイルentry.js bundle.js
  • index.を すると、コンテンツがit works it works from module.js
    • になります.
    Webpackは ファイルを し、 を む ファイルを します.これらのファイルはすべてbundle.jsに します.Webpackは モジュールに のidを り てて、このIDインデックスとアクセスモジュールを します.ページ には、まずentry.jsのコードを します. のモジュールはrequireを する に します.
    5.loaderは のモジュールリソースをロードする(cssをロードすることを とする)
  • インストールstyle-loader css-loader 
    • npm install css-loader style-loader
  • cssファイルstyel.css
    • を します.
    body{
    background:red;
}
  • ファイルentry.jsにファイル
    • を する.
    require("./style.css");
document.write("it works");
document.write(require("./module.js"));
  • コンパイルentry.js bundle.js 
    • webpack entry.js bundle.js --module-bind 'css=style!css'
  • ページを し、ページの は
    • です.
    6. ファイルには にいくつかのwebpackがコマンドを するパラメータとプラグインが されています. は5のcs-loaderを するコマンドパラメータの です.
    var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: "./",
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  }
}
    のパラメータを した 、5でコンパイルする は、 のコマンドを すればいいです.
    webpack
    7.プラグインはwebpackでは に で、 ファイルにプラグインを するだけでいいです.
    var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: "./",
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  },
  plugins: [
    new webpack.BannerPlugin('This file is created by llz')
  ]
}
    のplugins オプションで したプラグインは、bundle.jsのファイルヘッダにコメントを します.
    8. とデバッグ
  • webpackサーバを にする
    • webpack-dev-server
  • webpackファイルを にしてリアルタイムモニタを します.
    webpack --watch
  • webpack ファイルコンパイルの 
    • webpack --progress
  • プリントコンパイル ログ
    • webpack --display-error-details
    koa-router紹介