webpack入門_開発サーバ

前回はbiuldしてhtmlファイルを出力できるようになりました。今回は開発用サーバを使って毎回ビルドしないでも修正内容を確認できるようにしたいと思います。

公式のドキュメントでは開発用にwebpackをwatchモードで起動したり、webpack-dev-server,webpack-dev-midlewareを使うとありますが、webpack-dev-serverがこの中では一番高機能なのでこれを試してみたいと思います。webpack-dev-serverの後継としてwebpack-serverが出ていますが、まだ情報も少なさそうなのでまずはwebpack-dev-serverに慣れていみたいと思います。

webpack-dev-serverを使えるようにするため、以下のコマンドを実行します。

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

それから、webpack.config.jsにdevtoolとdevServerの内容を追加して以下のようにします。

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

module.exports = {
  entry: {
    app: './src/index.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management',
      filename: "index.html",
      template: "./index.html"
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(csv|tsv)$/,
        use: [
          'csv-loader'
        ]
      },
      {
        test: /\.xml$/,
        use: [
          'xml-loader'
        ]
      }
    ]

  }
};

次に、package.jsonのscriptsにstartを足して以下のようにします。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "src/index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "csv-loader": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  }
}

後はnpm run startを実行することでブラウザが立ち上がってindex.htmlの内容が表示されるのが確認できます。

npm run start