webpack-dev-serverの初期設定

すでに一週間近く、webpack-dev-serverが起動しないというエラーに悩まされていた私は、先日、簡単にwebpack-dev-serverの設定を簡単に調べた

だが、問題は関係しなかった。

だから、今度は、自分で最初から設定をやってみる事にしたんだ。

目次

  • 下準備
  • 実行パスを通す
  • 必要なモジュールのインストール
  • webpack.config.jsを作成
  • package.jsonにタスクを追加
  • ソース用のファイル等を準備
  • webpack-dev-serverを起動
  • ブラウザで確認

下準備

ディレクトリをつくって、npm initする。

Enterを連打する。

$ mkdir webpack
$ cd webpack
$ npm init 
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install  --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (test)
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/kobachi/dev/test/package.json:

{
  "name": "test",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

実行パスを通す

vim ~/.bash_profile
export $PARH:/path/to/webpack/node_modules/.bin // 追記

$ source ~/.bash_profile
$ echo $PATH // パスが通ったか確認
/usr/local/bin:/usr/local/bin:/usr/sbin:/Users/kobachi/.nodebrew/current/bin:/usr/bin:/bin:/sbin:Users/kobachi/dev/webpack/node_modules/.bin

必要なモジュールのインストール

webpackとローダーに使用するモジュールを(今回はbabel-loaderでes2015プリセットを使用する形)インストールする。


$ npm install --save-dev webpack webpack-dev-server babel-loader babel-preset-es2015
... 略 ...
webpack-dev-server@1.14.1 node_modules/webpack-dev-server
├── connect-history-api-fallback@1.1.0
├── stream-cache@0.0.2
├── strip-ansi@3.0.1 (ansi-regex@2.0.0)
├── supports-color@3.1.2 (has-flag@1.0.0)
├── http-proxy@1.13.3 (eventemitter3@1.2.0, requires-port@1.0.0)
├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)
├── compression@1.6.2 (on-headers@1.0.1, vary@1.1.0, bytes@2.3.0, debug@2.2.0, compressible@2.0.8, accepts@1.3.3)
├── webpack-dev-middleware@1.6.1 (range-parser@1.2.0, mime@1.3.4, memory-fs@0.3.0)
├── sockjs@0.3.17 (uuid@2.0.2, faye-websocket@0.10.0)
├── sockjs-client@1.1.1 (inherits@2.0.1, json3@3.3.2, debug@2.2.0, url-parse@1.1.1, eventsource@0.1.6, faye-websocket@0.11.0)
├── express@4.13.4 (escape-html@1.0.3, array-flatten@1.1.1, path-to-regexp@0.1.7, utils-merge@1.0.0, cookie-signature@1.0.6, merge-descriptors@1.0.1, methods@1.1.2, fresh@0.3.0, range-parser@1.0.3, vary@1.0.1, cookie@0.1.5, parseurl@1.3.1, etag@1.7.0, content-type@1.0.2, content-disposition@0.5.1, depd@1.1.0, qs@4.0.0, debug@2.2.0, finalhandler@0.4.1, on-finished@2.3.0, proxy-addr@1.0.10, serve-static@1.10.3, send@0.13.1, type-is@1.6.13, accepts@1.2.13)
└── serve-index@1.7.3 (escape-html@1.0.3, parseurl@1.3.1, batch@0.5.3, http-errors@1.3.1, accepts@1.2.13, debug@2.2.0, mime-types@2.1.11)

webpack@1.13.1 node_modules/webpack
├── interpret@0.6.6
├── tapable@0.1.10
├── clone@1.0.2
├── async@1.5.2
├── loader-utils@0.2.15 (object-assign@4.1.0, emojis-list@2.0.1, json5@0.5.0, big.js@3.1.3)
├── acorn@3.1.0
├── mkdirp@0.5.1 (minimist@0.0.8)
├── supports-color@3.1.2 (has-flag@1.0.0)
├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)
├── enhanced-resolve@0.9.1 (memory-fs@0.2.0, graceful-fs@4.1.4)
├── webpack-core@0.6.8 (source-list-map@0.1.6, source-map@0.4.4)
├── memory-fs@0.3.0 (errno@0.1.4, readable-stream@2.1.4)
├── uglify-js@2.6.2 (uglify-to-browserify@1.0.2, async@0.2.10, yargs@3.10.0, source-map@0.5.6)
├── watchpack@0.2.9 (graceful-fs@4.1.4, async@0.9.2, chokidar@1.5.1)
└── node-libs-browser@0.5.3 (https-browserify@0.0.0, tty-browserify@0.0.0, constants-browserify@0.0.1, path-browserify@0.0.0, os-browserify@0.1.2, string_decoder@0.10.31, process@0.11.3, punycode@1.4.1, querystring-es3@0.2.1, domain-browser@1.1.7, assert@1.4.1, timers-browserify@1.4.2, stream-browserify@1.0.0, events@1.1.0, vm-browserify@0.0.4, console-browserify@1.1.0, http-browserify@1.7.0, url@0.10.3, buffer@3.6.0, util@0.10.3, readable-stream@1.1.14, browserify-zlib@0.1.4, crypto-browserify@3.2.8)

babel-core@6.9.1 node_modules/babel-core
├── slash@1.0.0
├── shebang-regex@1.0.0
├── path-exists@1.0.0
├── path-is-absolute@1.0.0
├── babel-messages@6.8.0
├── babel-template@6.9.0
├── babel-helpers@6.8.0
├── private@0.1.6
├── convert-source-map@1.2.0
├── minimatch@2.0.10 (brace-expansion@1.1.4)
├── debug@2.2.0 (ms@0.7.1)
├── babel-code-frame@6.8.0 (js-tokens@1.0.3, chalk@1.1.3, esutils@2.0.2)
├── babel-generator@6.9.0 (detect-indent@3.0.1)
├── json5@0.4.0
├── babylon@6.8.0
├── babel-types@6.9.1 (to-fast-properties@1.0.2, esutils@2.0.2)
├── source-map@0.5.6
├── babel-traverse@6.9.0 (globals@8.18.0, invariant@2.2.1)
├── babel-runtime@6.9.2 (regenerator-runtime@0.9.5, core-js@2.4.0)
├── lodash@4.13.1
└── babel-register@6.9.0 (home-or-tmp@1.0.0, mkdirp@0.5.1, source-map-support@0.2.10, core-js@2.4.0)

babel-loader@6.2.4 node_modules/babel-loader
├── object-assign@4.1.0
├── loader-utils@0.2.15 (emojis-list@2.0.1, json5@0.5.0, big.js@3.1.3)
└── mkdirp@0.5.1 (minimist@0.0.8)

babel-preset-es2015@6.9.0 node_modules/babel-preset-es2015
├── babel-plugin-transform-es2015-literals@6.8.0 (babel-runtime@6.9.2)
├── babel-plugin-check-es2015-constants@6.8.0 (babel-runtime@6.9.2)
├── babel-plugin-transform-es2015-block-scoped-functions@6.8.0 (babel-runtime@6.9.2)
├── babel-plugin-transform-es2015-destructuring@6.9.0 (babel-runtime@6.9.2)
├── babel-plugin-transform-es2015-duplicate-keys@6.8.0 (babel-runtime@6.9.2, babel-types@6.9.1)
├── babel-plugin-transform-es2015-unicode-regex@6.8.0 (regexpu-core@1.0.0, babel-helper-regex@6.9.0, babel-runtime@6.9.2)
├── babel-plugin-transform-es2015-function-name@6.9.0 (babel-runtime@6.9.2, babel-types@6.9.1, babel-helper-function-name@6.8.0)
├── babel-plugin-transform-es2015-template-literals@6.8.0 (babel-runtime@6.9.2)
├── babel-plugin-transform-es2015-typeof-symbol@6.8.0 (babel-runtime@6.9.2)
├── babel-plugin-transform-es2015-classes@6.9.0 (babel-helper-optimise-call-expression@6.8.0, babel-messages@6.8.0, babel-helper-replace-supers@6.8.0, babel-helper-function-name@6.8.0, babel-types@6.9.1, babel-traverse@6.9.0, babel-runtime@6.9.2, babel-template@6.9.0, babel-helper-define-map@6.9.0)
├── babel-plugin-transform-es2015-object-super@6.8.0 (babel-helper-replace-supers@6.8.0, babel-runtime@6.9.2)
├── babel-plugin-transform-es2015-sticky-regex@6.8.0 (babel-helper-regex@6.9.0, babel-runtime@6.9.2, babel-types@6.9.1)
├── babel-plugin-transform-es2015-block-scoping@6.9.0 (lodash@4.13.1, babel-types@6.9.1, babel-traverse@6.9.0, babel-template@6.9.0, babel-runtime@6.9.2)
├── babel-plugin-transform-es2015-shorthand-properties@6.8.0 (babel-runtime@6.9.2, babel-types@6.9.1)
├── babel-plugin-transform-es2015-arrow-functions@6.8.0 (babel-runtime@6.9.2)
├── babel-plugin-transform-es2015-computed-properties@6.8.0 (babel-helper-define-map@6.9.0, babel-runtime@6.9.2, babel-template@6.9.0)
├── babel-plugin-transform-es2015-spread@6.8.0 (babel-runtime@6.9.2)
├── babel-plugin-transform-regenerator@6.9.0 (babel-plugin-syntax-async-functions@6.8.0, private@0.1.6, babylon@6.8.0, babel-types@6.9.1, babel-runtime@6.9.2, babel-traverse@6.9.0, babel-core@6.9.1)
├── babel-plugin-transform-es2015-parameters@6.9.0 (babel-helper-get-function-arity@6.8.0, babel-helper-call-delegate@6.8.0, babel-template@6.9.0, babel-traverse@6.9.0, babel-types@6.9.1, babel-runtime@6.9.2)
├── babel-plugin-transform-es2015-for-of@6.8.0 (babel-runtime@6.9.2)
└── babel-plugin-transform-es2015-modules-commonjs@6.8.0 (babel-plugin-transform-strict-mode@6.8.0, babel-types@6.9.1, babel-template@6.9.0, babel-runtime@6.9.2)

途中、なんか、エラーでてたけど、見なかった事にする。

webpack.config.jsを作成


$ vim webpack.config.js

const webpack = require('webpack');

module.exports = {
  context: __dirname + '/src',
  entry: {
    javascript: './index.js'
  },

  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },

  // Configuration for dev server
  devServer: {
    contentBase: 'dist',
    port: 8000
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query:{
          presets: ['es2015']
        }
      }
    ]
  }
};

package.jsonにタスクを追加

$ vim package.json
{
  "name": "webpack",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server", // 追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

srcのファイルを準備

$ vim src/index.js

console.log("test");

webpack-dev-serverを起動

$ $ npm run start

> webpack@0.0.0 start /Users/kobachi/dev/webpack
> webpack-dev-server

http://localhost:8000/webpack-dev-server/
webpack result is served from /
content is served from dist
Hash: 292ccff6f95194ea1475
Version: webpack 1.13.1
Time: 9421ms
        Asset     Size  Chunks             Chunk Names
    output.js  1.55 kB       0  [emitted]  javascript
output.js.map  1.57 kB       0  [emitted]  javascript
chunk    {0} output.js, output.js.map (javascript) 35 bytes [rendered]
    [0] ./src/index.js 35 bytes {0} [built]
webpack: bundle is now VALID.

ブラウザで確認

http://localhost:8000/webpack-dev-server/へアクセスと、サーバが起動しているのが確認できる。

スクリーンショット 2016-06-04 21.16.33

http://localhost:8000/webpack-dev-server/output.jsへアクセスすると、ファイルが書き出されているのが確認できる。

あとはReactなりVue.jsでルーティングしてあげる(多分)。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク