🌐

WebpackでPugの開発環境を構築

1 min read

完成形のプロジェクト

https://github.com/asano-yuki/webpack-pug

1. Pugのバージョン

※バージョンによっては動作しない可能性があるため注意

package.json
"devDependencies": {
  "html-webpack-plugin": "^5.3.1",
  "pug": "^3.0.2",
  "pug-loader": "^2.4.0",
  "webpack": "^5.38.1",
  "webpack-cli": "^4.7.0",
  "webpack-dev-server": "^3.11.2"
}

2. webpack.config.jsの作成

webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: 'pug-loader'
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    port: 3000,
    open: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.pug',
      filename: 'index.html'
    })
  ]
}