WIP

webpackについて知識を体系化する

2017年04月11日に更新 vsanna / public JavaScript

2.0も出たので体系化したい

  • webpackを一言で言うと
    • 複数のmoduleの依存関係を解決し、静的アセットファイルを出力するツール
  • 4つの重要な概念
    1. entry
    2. output
    3. loaders
      • jsが依存するjs以外のファイル(css, html, scss, jpg etc)をmoduleに変換する道具
      • つまり、js以外のファイルをjsとして使えるようにするための変換器
      • 例として、*.js または*.jsxというファイルに対しては、babel-loaderを使ってtransformしてくれとwebpackに伝えたいと宣言するなど。(例を後述)
    4. plugin
      • plugins are most commonly used (but not limited to) performing actions and custom functionality on "compilations" or "chunks" of your bundled modules - requireしておいてからnew すればよい(例を後述)
      • 例: uglifyしたりprefixつけたり
# webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: './dist'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

shareシェアする

forumコメント

まだコメントはありません!
ログインしてコメントを残す
{{comment.user.name}} on {{commentCreatedAt()}}

content_copy前後のイシュー

{{message}}