webpackでプロジェクト作成（開発モード）

#webpackでプロジェクト作成（開発モード）

Getting Started
Asset Management
Output Management 　
Development (←今回はコレ)

webpackの[開発モード（development mode）](https://webpack.js.org/guides/development/#using-source-maps)について。

vueなどのプロジェクトでlocalhostのページを立ち上げるがその方法がわかる。

1. デバッグ（source map）
2. webpack-dev-server (npm start)
3. webpack-dev-middleware (npm run serve)

##developmentモードの設定

configファイルに`mode: 'development'`を記載する。

```js:webpack.config.js
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  module.exports = {
   mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js',
    },
    plugins: [
      // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Development',
      }),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
```


<br>
##source map
複数のjsファイルをまとめてbundle.jsのようなバンドルファイルを使用する場合に、**どのファイルでエラーが発生しているかをわかりやすくする**ために、source mapを使用する。

これがないと、バンドルファイルのエラーとして報告され、特定が難しくなる。

mapツールは複数あるが、ここではinline-source-mapを使用。

```webpack.config.js
devtool: 'inline-source-map',
```



<br>
##監視システム
変更を自動的に感知するツールがいくつかあるが、その中でもよく使われる`webpack-dev-server`について。

よくvueなどでlocalのプロジェクトを立ち上げるときに使う`npm run serve`の原型のようなもの。


パッケージをインストールし、configファイルに追記する。

```
npm install --save-dev webpack-dev-server
```

```webpack.config.js
   devServer: {
     contentBase: './dist',
   },
```


<br>
###npmコマンドで実行できるようaliasを追加する

```package.json
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
 ß },
```

###ブラウザ起動

`npm start`でlocalhost:8080のブラウザが自動で立ち上がる。




<br>
##webpack-dev-middleware
webpackで処理中のファイルを出力するパッケージ。
webpack-dev-serverに含まれているものだが、個別に見てみる。

node.jsでサーバーを立ち上げるときにこの方法が使われている。`node server.js`でlocalhost:3000を立ち上げる処理。


##パッケージのインストール
使用するために`express`と`webpack-dev-middleware`の２つのパッケージをインストールする。

expressはサーバーの一つ。

```
npm install --save-dev express webpack-dev-middleware
```

configファイルのoutputに`publicPath:'/'`を追記する。


```
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  module.exports = {
    mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js',
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
    },
    plugins: [
      new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
      new HtmlWebpackPlugin({
        title: 'Output Management',
      }),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
     publicPath: '/',
    },
  };
```


##express serverのセッティングファイル作成
express serverを使用するため、server.jsを作成し、configファイルと、3000番ポートを使用するように指示する。

```js:server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});
```


<br>
##aliasを作成
package.jsonにaliasを追記。

```js:package.json
 "server": "node server.js",
```


<br>
##サーバー立ち上げ

```
$npm run server

Example app listening on port 3000!
```

http://localhost:3000　
でページが開ける。