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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Pug

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

JavaScript

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

Q&A

0回答

2016閲覧

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

mojao_0227

総合スコア24

Pug

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

JavaScript

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

0グッド

0クリップ

投稿2019/01/12 00:55

実現したい事

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

発生している問題

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

terminal

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

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

該当のソースコード

webpack

1// webpack.config.js 2const webpack = require('webpack') 3const path = require('path') 4const globule = require('globule') 5const CopyWebpackPlugin = require('copy-webpack-plugin') 6const ExtractTextPlugin = require('extract-text-webpack-plugin') 7 8// ディレクトリの設定 9const opts = { 10 srcDir: path.join(__dirname, 'src'), 11 destDir: path.join(__dirname, 'public') 12} 13 14// keyの拡張子のファイルが、valueの拡張子のファイルに変換される 15const convertExtensions = { 16 pug: 'html', 17 sass: 'css', 18 js: 'js' 19} 20 21// トランスパイルするファイルを列挙する 22// _から始まるファイルは、他からimportされるためのファイルとして扱い、個別のファイルには出力しない 23const files = {} 24Object.keys(convertExtensions).forEach(from => { 25 const to = convertExtensions[from] 26 globule.find([`**/*.${from}`, `!**/_*.${from}`], {cwd: opts.srcDir}).forEach(filename => { 27 files[filename.replace(new RegExp(`.${from}$`, 'i'), `.${to}`)] = path.join(opts.srcDir, filename) 28 }) 29}) 30const pugLoader = [ 31 'apply-loader', 32 'pug-loader' 33] 34 35const sassLoader = [ 36 { 37 loader: 'css-loader', 38 options: { 39 minimize: true 40 } 41 }, 42 { 43 loader: 'postcss-loader', 44 options: { 45 ident: 'postcss', 46 plugins: (loader) => [require('autoprefixer')()] 47 } 48 }, 49 'sass-loader' 50] 51const jsLoader = { 52 loader: 'babel-loader', 53 query: { 54 presets: ['env'] 55 } 56} 57 58const config = { 59 mode: 'development', 60 context: opts.srcDir, 61 entry: files, 62 output: { 63 filename: '[name]', 64 path: opts.destDir 65 }, 66 module: { 67 rules: [ 68 { 69 test: /.pug$/, 70 use: ExtractTextPlugin.extract(pugLoader), 71 }, 72 { 73 test: /.sass$/, 74 oneOf: [ 75 { 76 // pugから `require('./hoge.sass?inline')` のように呼ばれた時は、ExtractTextPluginをかけない 77 resourceQuery: /inline/, 78 use: sassLoader 79 }, 80 { 81 // それ以外の時は、単純にファイルを生成する 82 use: ExtractTextPlugin.extract(sassLoader) 83 } 84 ] 85 }, 86 { 87 test: /.js$/, 88 exclude: /node_modules(?!/webpack-dev-server)/, 89 use: jsLoader 90 } 91 ] 92 }, 93 plugins: [ 94 new ExtractTextPlugin('[name]'), 95 // convertExtensionsに含まれていないファイルは、単純にコピーする 96 new CopyWebpackPlugin( 97 [{from: {glob: '**/*', dot: true}}], 98 {ignore: Object.keys(convertExtensions).map((ext) => `*.${ext}`)} 99 ), 100 new webpack.DefinePlugin({ 101 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 102 }) 103 ], 104 devServer: { 105 contentBase: opts.destDir, 106 watchContentBase: true, 107 open: true 108 } 109} 110 111if (process.env.NODE_ENV === 'production') { 112 config.plugins = config.plugins.concat([ 113 new webpack.optimize.UglifyJsPlugin(), 114 new webpack.optimize.OccurrenceOrderPlugin(), 115 new webpack.optimize.AggressiveMergingPlugin() 116 ]) 117} 118 119module.exports = config

json

1// package.json 2{ 3 "name": "static_generator", 4 "version": "1.0.0", 5 "description": "", 6 "main": "index.js", 7 "scripts": { 8 "test": "echo \"Error: no test specified\" && exit 1" 9 }, 10 "keywords": [], 11 "author": "", 12 "license": "ISC", 13 "devDependencies": { 14 "apply-loader": "^2.0.0", 15 "autoprefixer": "^9.4.4", 16 "babel-core": "^6.26.3", 17 "babel-loader": "^8.0.5", 18 "babel-preset-env": "^1.7.0", 19 "copy-webpack-plugin": "^4.6.0", 20 "css-loader": "^2.1.0", 21 "extract-text-webpack-plugin": "^4.0.0-beta.0", 22 "globule": "^1.2.1", 23 "node-sass": "^4.11.0", 24 "postcss": "^7.0.10", 25 "postcss-loader": "^3.0.0", 26 "pug": "^2.0.3", 27 "pug-loader": "^2.4.0", 28 "sass-loader": "^7.1.0", 29 "style-loader": "^0.23.1", 30 "webpack": "^4.28.4", 31 "webpack-cli": "^3.2.1", 32 "webpack-dev-server": "^3.1.14" 33 } 34}

pug

1// index.pug 2doctype 3html(lang="ja") 4 head 5 meta(charset="utf-8") 6 style(src="css/style.css") 7 title Pug 8 body 9 include _partial/header.pug 10 11 main.main 12 h2.content_ttl トップページ 13 14 p 15 |コンテンツ 16 br 17 |コンテンツ 18 19 section#top 20 .content.top

pug

1// /_partial/header.pug 2header.PageHeader 3 h1.PageHeader__heading ヘッダー 4 p.PageHeader__lede テキスト

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問