webpack

webpack

参考：webpack で始めるイマドキのフロントエンド開発

webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。

インストール

$npm i -g webpack

これで、hoge.jsがscript.jsとして作成される。

$webpack hoge.js script.js

参考：http://webpack.github.io/docs/installation.html これを使うと簡易webサーバが立ち上げられるっぽい。

$ npm install webpack-dev-server --save-dev

参考：webpack-dev-serverの基本的な使い方とポイント 便利だな。

下記のように、package.jsonのscriptsに、webpack-dev-serverの起動を追加して、npm run webpack-dev-serverとしたらサーバが起動した。設定しないと、プロジェクトルートをwebルートにされました。

"scripts": {
  "webpack-dev-server": "webpack-dev-server"
},

webpackの設定

webpack.config.jsというファイルに設定を書き込む。

webpack.config.jsを下記のようにして、webpackを実行するとできた。

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname + '/www/js',
    filename: 'bundle.js'
  }
};

devServerのcontentBaseを指定すると、webpack-dev-serverのWEBルートが変更できる。ポートも変更できるらしい。

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname + '/www/js',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: __dirname + '/www',
    port: 8080
  },
};

Hot Module Replacement（HMR）というのも便利そう。

参考：http://webpack.github.io/docs/usage.html

nativeのjavascript以外に対応させるためには、loaderというのを使うらしい。例えばbabelであれば、babel-loaderというのがある。

babelをnpmでインストールしてから、webpack.config.jsに、下記を追加する。

module: {
  loaders: [{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
  }]
},

testとかよくわからないけど、jsファイルはbabel-loader通す的な感じでしょうか？これによって、Reactとかも対応可能になるもよう。reactで試してみよう。

参考：babelとwebpackを使ってES6でreactを動かすまでのチュートリアル

main.jsを下記のようにする。

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}

render(<App/>, document.getElementById('example'));

これでwebpackしたら、正常に動いた。

あと、プラグインもあって、例えば、jsファイルの圧縮もある。 webpack.config.jsの最初の行に下記を追加する。

const webpack = require('webpack');

あと、webpack.config.jsに下記を追記する。

plugins: [
      new webpack.optimize.UglifyJsPlugin({
          compress: {
              warnings: false,
          },
          output: {
              comments: false,
          },
      }),
  ]

これで圧縮された。 webpack -p とするだけで、本番用になるので、圧縮してくれるらしい。

スタイルシートもエントリーポイントのJSに組み込むらしい。 参考：http://webpack.github.io/docs/tutorials/getting-started/ 参考：タスクランナーを使わずに webpack だけでフロントエンド開発する方法

$ npm i -D css-loader style-loader

cssをmain.jsに組み込む。

require("./css/style.css");

webpack.config.jsにcss loaderの設定を追加する。

module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel'
    },
    {
      test: /\.css$/,
        loader: "style!css"
    }
  ]
},

これでできた。 webpack.config.jsに下記を追加すると、importとかするときに、拡張子をつけなくてよくなる。

resolve: {
  extensions: ['', '.js', '.css']
},

あと、webpack-dev-serverは、watchしてくれているらしい。ファイルを変更すると自動的に内部的にwebpackし、その結果をメモリ上に保存するらしい。ファイル自体は作成しない。webpack-dev-serverを利用しない場合は、webpackのwatch機能を利用したらしい。

$ webpack -d --watch

-dというのは、source mapを作成してくれるものらしい。やってみる。おーでてる。bundle.js.mapが作成されました。多分watchできてそう。

あとは、コードチェックしてくれる、eslintを入れてみる。webpackで使う場合、これもloaderになる。eslint-loader。

$ npm i -D eslint-loader

どうもERROR in Cannot find module 'eslint'というエラーがでるので、eslintは別で調べる。