Node.jsでWebPackの環境を作る手順

最低限のWebPack環境を構築するための手順をメモしておく。

Node.jsの環境は構築済みの状態。ディレクトリを作って初期化し、webpackをインストールする。

user@localhost ~ % mkdir path/to/project
user@localhost ~ % cd path/to/project
user@localhost project % mkdir dist
user@localhost project % mkdir src
user@localhost project % mkdir src/modules
user@localhost project % npm init
user@localhost project % npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin
user@localhost project % vi webpack.config.js

webpack.config.jsを作る。諸々必要に応じて追記する。

const path = require( 'path' );
const outputPath = path.resolve( __dirname, 'dist' );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
module.exports = {
  entry: {
    index: path.join( __dirname, 'src', 'index.js' )
  },
  output: {
    path: outputPath,
    filename: "bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
  ],
  mode: "development",
  devServer: {
    static: {
      directory: outputPath
    },
    open: {
      app: {
        name: 'firefox'
      }
    },
    port: 3001
  }
};

user@localhost project % vi package.json

package.jsonを編集する。本来は「npm init」時に入力すれば良いが大抵は後付になりそう。

"scripts": {
  "start": "webpack --watch --config webpack.config.js & webpack-dev-server"
}