webpack で複数の entry ファイルを出力する

あらすじ

ユーザー画面と管理画面を SPA で作りたいんだけど component とか再利用したい時のお話です

mkdir practice-webpack-output && cd $_
mkdir -p src/{app,admin} www/{app,admin}
npm init -y
npm install --save-dev webpack babel-core babel-loader babel-preset-es2015

create .babelrc

echo '{"presets": ["es2015"]}' > .babelrc

create webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = { 
  entry: {
    "app/app": "./src/app/index.js",
    "admin/admin": "./src/admin/index.js"
  },
  output: {
    path: "./www",
    filename: "[name].bundle.js",
  },  
  devtool: 'inline-source-map',
  resolve: {
    extensions: ['', '.js'],
  },  
  module: {
    loaders:[
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
    ]   
  }
}

共通処理を記述

echo 'console.log("common")' > src/common.js

ユーザー画面用の処理を記述

echo 'import "../common"' > src/app/index.js
echo 'console.log("app")' >> src/app/index.js

管理画面の処理を記述

echo 'import "../common"' > src/admin/index.js
echo 'console.log("admin")' >> src/admin/index.js

コンパイル

$(npm bin)/webpack 

確認

% node www/app/app.bundle.js
common
app

% node www/admin/admin.bundle.js
common
admin

参考

http://webdesign-dackel.com/2015/09/10/webpack-multiple-output/