質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.42%

  • JavaScript

    18023questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • webpack

    273questions

  • Pug

    34questions

    Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

pugのincludeをwebpackでコンパイルできない

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 36

mojao_0227

score 16

実現したい事

webpack4.0で環境構築中です。
簡単な構成なのでgulpは使用せずにwebpackのみで行いたいと思い、
こちらの記事を参考にしています。
ディレクトリ構成は下記の様に考えています。
root/
├ public/
├ src/
│ └ _partial/
│   └ header.pug
│ └ index.pug

発生している問題

index.pugのみだとcompileは通ります。
/_partial/header.pugをincludeすると

ERROR in ./index.pug (../node_modules/pug-loader!./index.pug)
    Module build failed (from ../node_modules/pug-loader/index.js):
    Error: Can't resolve './_partial/header.pug' in '/Users/mojao/Documents/static_generator/src'
        at doResolve (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/Resolver.js:180:19)
        at hook.callAsync (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
        at _fn0 (eval at create (/Users/mojao/Documents/static_generator/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
        at resolver.doResolve (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
        at hook.callAsync (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
        at _fn0 (eval at create (/Users/mojao/Documents/static_generator/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
        at hook.callAsync (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
        at _fn0 (eval at create (/Users/mojao/Documents/static_generator/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
        at resolver.doResolve (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
        at hook.callAsync (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
        at _fn42 (eval at create (/Users/mojao/Documents/static_generator/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:393:1)
        at hook.callAsync (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
        at _fn0 (eval at create (/Users/mojao/Documents/static_generator/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
        at resolver.doResolve (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
        at hook.callAsync (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
        at _fn1 (eval at create (/Users/mojao/Documents/static_generator/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:24:1)
        at hook.callAsync (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
        at _fn0 (eval at create (/Users/mojao/Documents/static_generator/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
        at fs.stat (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:22:13)
        at process.nextTick (/Users/mojao/Documents/static_generator/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
        at _combinedTickCallback (internal/process/next_tick.js:131:7)
        at process._tickCallback (internal/process/next_tick.js:180:9)
     @ ./index.pug (../node_modules/apply-loader!../node_modules/pug-loader!./index.pug) 1:10-169

という形でエラーが出ます。

該当のソースコード

// webpack.config.js
const webpack = require('webpack')
const path = require('path')
const globule = require('globule')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

// ディレクトリの設定
const opts = {
  srcDir: path.join(__dirname, 'src'),
  destDir: path.join(__dirname, 'public')
}

// keyの拡張子のファイルが、valueの拡張子のファイルに変換される
const convertExtensions = {
  pug: 'html',
  sass: 'css',
  js: 'js'
}

// トランスパイルするファイルを列挙する
// _から始まるファイルは、他からimportされるためのファイルとして扱い、個別のファイルには出力しない
const files = {}
Object.keys(convertExtensions).forEach(from => {
  const to = convertExtensions[from]
  globule.find([`**/*.${from}`, `!**/_*.${from}`], {cwd: opts.srcDir}).forEach(filename => {
    files[filename.replace(new RegExp(`.${from}$`, 'i'), `.${to}`)] = path.join(opts.srcDir, filename)
  })
})
const pugLoader = [
  'apply-loader',
  'pug-loader'
]

const sassLoader = [
  {
    loader: 'css-loader',
    options: {
      minimize: true
    }
  },
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: (loader) => [require('autoprefixer')()]
    }
  },
  'sass-loader'
]
const jsLoader = {
  loader: 'babel-loader',
  query: {
    presets: ['env']
  }
}

const config = {
    mode: 'development',
  context: opts.srcDir,
  entry: files,
  output: {
    filename: '[name]',
    path: opts.destDir
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: ExtractTextPlugin.extract(pugLoader),
      },
      {
        test: /\.sass$/,
        oneOf: [
          {
            // pugから `require('./hoge.sass?inline')` のように呼ばれた時は、ExtractTextPluginをかけない
            resourceQuery: /inline/,
            use: sassLoader
          },
          {
            // それ以外の時は、単純にファイルを生成する
            use: ExtractTextPlugin.extract(sassLoader)
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules(?!\/webpack-dev-server)/,
        use: jsLoader
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name]'),
    // convertExtensionsに含まれていないファイルは、単純にコピーする
    new CopyWebpackPlugin(
      [{from: {glob: '**/*', dot: true}}],
      {ignore: Object.keys(convertExtensions).map((ext) => `*.${ext}`)}
    ),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  devServer: {
    contentBase: opts.destDir,
    watchContentBase: true,
    open: true
  }
}

if (process.env.NODE_ENV === 'production') {
  config.plugins = config.plugins.concat([
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.AggressiveMergingPlugin()
  ])
}

module.exports = config
// package.json
{
  "name": "static_generator",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "apply-loader": "^2.0.0",
    "autoprefixer": "^9.4.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^2.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "globule": "^1.2.1",
    "node-sass": "^4.11.0",
    "postcss": "^7.0.10",
    "postcss-loader": "^3.0.0",
    "pug": "^2.0.3",
    "pug-loader": "^2.4.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}
// index.pug
doctype
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title Pug
  body
    include _partial/header.pug

    main.main
      h2.content_ttl トップページ

      p
        |コンテンツ
        br
        |コンテンツ

      section#top
        .content.top
// /_partial/header.pug
header.PageHeader
  h1.PageHeader__heading ヘッダー
  p.PageHeader__lede テキスト

ご存知の方いらっしゃいましたらご教示頂けると幸いです、よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.42%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    18023questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • webpack

    273questions

  • Pug

    34questions

    Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。